Sådan får du alle forespørgselsstrengparametre som et objekt i JavaScript

I JavaScript kan du bruge URLSearchParams grænseflade til at konvertere en forespørgselsstreng til et objekt. Det giver hjælpemetoder til at arbejde med forespørgselsstrengen i en URL.

  1. Send forespørgselsstrengen til URLSearchParams konstruktør for at gøre den til en objektinstans.
  2. Brug get() metode til at få adgang til forespørgselsstrengparametre.
  3. For at få et indbygget JavaScript-objekt skal du videregive objektforekomsten til Object.fromEntries() metode.
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' }

I webbrowseren skal du blot sende window.location.search til URLSearchParams konstruktør for at omdanne forespørgselsstrengen til et objekt:

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

Hvis du har en hel URL, skal du oprette et nyt URL-objekt for at hente forespørgselsstrengen og derefter sende den til URLSearchParams konstruktør:

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

const params = new URLSearchParams(url.search)

Object.fromEntries() funktion fungerer fint, så længe der ikke er nogen dublerede forespørgselsstrengparametre. Hvis du har noget som ?size=M&size=XL , får du kun { size: 'XL' } .

For at håndtere dublerede forespørgselsstrengparametre skal du bruge følgende fremgangsmåde i stedet:

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' }

Læs denne artikel for at lære, hvordan du konverterer et objekt til en forespørgselsstreng i JavaScript.