logo

Jak získat všechny parametry řetězce dotazu jako objekt v JavaScriptu

V JavaScriptu můžete použít URLSearchParams rozhraní pro převod řetězce dotazu na objekt. Poskytuje obslužné metody pro práci s řetězcem dotazu adresy URL.

  1. Předejte řetězec dotazu do URLSearchParams konstruktor, který jej změní na instanci objektu.
  2. Použijte get() metoda pro přístup k parametrům řetězce dotazu.
  3. Chcete-li získat nativní objekt JavaScript, předejte instanci objektu do Object.fromEntries() metoda.
const qs = `?size=M&price=29&sort=desc`

const params = new URLSearchParams(qs)

console.log(params.get('size')) // M
console.log(params.get('price')) // 29
console.log(params.get('sort')) // desc

// Convert to native JS object
const obj = Object.fromEntries(params)
console.log(obj)
// { size: 'M', price: '29', sort: 'desc' }

Ve webovém prohlížeči stačí zadat window.location.search na URLSearchParams konstruktor pro přeměnu řetězce dotazu na objekt:

const params = new URLSearchParams(window.location.search)

Pokud máte celou adresu URL, vytvořte nový objekt adresy URL pro načtení řetězce dotazu a poté jej předejte do URLSearchParams konstruktor:

const url = new URL('http://example.com?size=M&price=29&sort=desc')

const params = new URLSearchParams(url.search)

Object.fromEntries() funkce funguje dobře, pokud neexistují žádné duplicitní parametry řetězce dotazu. Pokud máte něco jako ?size=M&size=XL , získáte pouze { size: 'XL' } .

Chcete-li zpracovat duplicitní parametry řetězce dotazu, použijte místo toho následující postup:

const qs = `?size=M&size=XL&price=29&sort=desc`

const params = new URLSearchParams(qs)

const obj = {}
for (const key of params.keys()) {
  if (params.getAll(key).length > 1) {
    obj[key] = params.getAll(key)
  } else {
    obj[key] = params.get(key)
  }
}

console.log(obj)
// { size: [ 'M', 'XL' ], price: '29', sort: 'desc' }

V tomto článku se dozvíte, jak převést objekt na řetězec dotazu v JavaScriptu.