Cómo convertir un objeto en una cadena de consulta usando JavaScript

En JavaScript, hay varias formas de convertir un objeto en una cadena de consulta. La forma más fácil y directa es usar el URLSearchParams interfaz. Si necesita admitir navegadores más antiguos, use la combinación de map() y join() métodos.

URLSearchParams

El URLSearchParams La interfaz proporciona métodos de utilidad para trabajar con la cadena de consulta de una URL en JavaScript. Se puede usar para agregar, eliminar y actualizar parámetros de cadena de consulta.

Aquí hay un ejemplo:

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

En el ejemplo anterior, pasamos un objeto al URLSearchParams() constructor y luego llamó al toString() método para obtener una cadena de consulta. Tenga en cuenta que el toString() El método devuelve una cadena de consulta sin el signo de interrogación.

map() &join()

Para convertir un objeto en una cadena de consulta en navegadores antiguos:

  1. Utilice el Object.keys() método para obtener todas las claves del objeto como una matriz.
  2. Utilice el Array.map() método para iterar sobre la matriz.
  3. Durante cada iteración, use el encodeURIComponent() para codificar el valor y luego devolver una cadena que contenga el nombre y el valor del parámetro de consulta.
  4. Utilice el Array.join() método para unir todas las cadenas mediante un ampersand & símbolo.

La forma más sencilla de convertir el objeto anterior en una cadena de consulta es mediante una combinación de map() y join() Funciones JavaScript:

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 módulo

Si está trabajando con Node.js, use el querystring nativo módulo para convertir un objeto en parámetros de cadena de consulta como se muestra a continuación:

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

El querystring El módulo codifica los parámetros de la cadena de consulta automáticamente, por lo que no necesita hacer nada.