Jak převést objekt na řetězec dotazu pomocí JavaScriptu

V JavaScriptu existuje několik způsobů, jak převést objekt na řetězec dotazu. Nejjednodušší a nejpřímější způsob je použít URLSearchParams rozhraní. Pokud potřebujete podporovat starší prohlížeče, použijte kombinaci map() a join() metody.

URLSearchParams

URLSearchParams rozhraní poskytuje obslužné metody pro práci s řetězcem dotazu adresy URL v JavaScriptu. Lze jej použít k přidání, odstranění a aktualizaci parametrů řetězce dotazu.

Zde je příklad:

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

Ve výše uvedeném příkladu jsme předali objekt do URLSearchParams() konstruktor a poté zavolal toString() metoda pro získání řetězce dotazu. Všimněte si, že toString() metoda vrací řetězec dotazu bez otazníku.

map() &join()

Chcete-li převést objekt na řetězec dotazu ve starších prohlížečích:

  1. Použijte Object.keys() metoda k získání všech klíčů objektu jako pole.
  2. Použijte Array.map() metoda pro iteraci pole.
  3. Během každé iterace použijte encodeURIComponent() zakódovat hodnotu a poté vrátit řetězec obsahující název a hodnotu parametru dotazu.
  4. Použijte Array.join() metoda pro spojení všech řetězců znakem ampersand & symbol.

Nejjednodušší způsob, jak převést výše uvedený objekt na řetězec dotazu, je použít kombinaci map() a join() Funkce JavaScriptu:

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

Pokud pracujete s Node.js, použijte nativní querystring modul pro převod objektu na parametry řetězce dotazu, jak je uvedeno níže:

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 automaticky kóduje parametry řetězce dotazu, takže nemusíte nic dělat.