logo

Sådan konverteres et objekt til en forespørgselsstreng ved hjælp af JavaScript

I JavaScript er der flere måder at konvertere et objekt til en forespørgselsstreng. Den nemmeste og mest direkte måde er at bruge URLSearchParams interface. Hvis du har brug for at understøtte ældre browsere, skal du bruge kombinationen af ​​map() og join() metoder.

URLSearchParams

URLSearchParams interface giver hjælpemetoder til at arbejde med forespørgselsstrengen for en URL i JavaScript. Den kan bruges til at tilføje, fjerne og opdatere forespørgselsstrengparametre.

Her er et eksempel:

const params = {
  name: 'John Doe',
  profession: 'Web Designer',
  age: 29
}

const qs = '?' + new URLSearchParams(params).toString()
console.log(qs)
// ?name=John+Doe&profession=Web+Designer&age=29

I ovenstående eksempel sendte vi et objekt til URLSearchParams() konstruktør og derefter kaldet toString() metode til at hente en forespørgselsstreng. Bemærk, at toString() metode returnerer en forespørgselsstreng uden spørgsmålstegnet.

map() &join()

Sådan konverteres et objekt til en forespørgselsstreng i ældre browsere:

  1. Brug Object.keys() metode til at få alle objektets nøgler som et array.
  2. Brug Array.map() metode til at iterere over arrayet.
  3. Under hver iteration skal du bruge encodeURIComponent() for at indkode værdien og derefter returnere en streng, der indeholder forespørgselsparameterens navn og værdi.
  4. Brug Array.join() metode til at forbinde alle strenge med et og-tegn & symbol.

Den enkleste måde at konvertere ovenstående objekt til en forespørgselsstreng er ved at bruge en kombination af map() og join() JavaScript-funktioner:

const params = {
  name: 'John Doe',
  profession: 'Web Designer',
  age: 29
}

const qs =
  '?' +
  Object.keys(params)
    .map(key => `${key}=${encodeURIComponent(params[key])}`)
    .join('&')

console.log(qs)
// ?name=John%20Doe&profession=Web%20Designer&age=29

querystring modul

Hvis du arbejder med Node.js, skal du bruge den oprindelige querystring modul til at konvertere et objekt til forespørgselsstrengparametre som vist nedenfor:

const params = {
  name: 'John Doe',
  profession: 'Web Designer',
  age: 29
}

const querystring = require('querystring')
const qs = '?' + querystring.stringify(params)

console.log(qs)
// ?name=John%20Doe&profession=Web%20Designer&age=29

querystring modul koder forespørgselsstrengparametre automatisk, så du behøver ikke at gøre noget.