logo

Cómo obtener todos los parámetros de cadena de consulta como un objeto en JavaScript

En JavaScript, puede usar el URLSearchParams interfaz para convertir una cadena de consulta en un objeto. Proporciona métodos de utilidad para trabajar con la cadena de consulta de una URL.

  1. Pase la cadena de consulta al URLSearchParams constructor para convertirlo en una instancia de objeto.
  2. Utilice el get() método para acceder a los parámetros de la cadena de consulta.
  3. Para obtener un objeto JavaScript nativo, pase la instancia del objeto al Object.fromEntries() método.
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' }

En el navegador web, solo pasa window.location.search a los URLSearchParams constructor para convertir la cadena de consulta en un objeto:

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

Si tiene una URL completa, cree un nuevo objeto de URL para recuperar la cadena de consulta y luego pásela al URLSearchParams constructor:

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

const params = new URLSearchParams(url.search)

El Object.fromEntries() funciona bien siempre que no haya parámetros de cadena de consulta duplicados. Si tienes algo como ?size=M&size=XL , solo obtendrás { size: 'XL' } .

Para manejar parámetros de cadena de consulta duplicados, utilice el siguiente enfoque en su lugar:

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

Lea este artículo para aprender cómo convertir un objeto en una cadena de consulta en JavaScript.