URLSearchParams

La API URLSearchParams proporciona una forma de obtener datos en los parámetros de una URL. Consta de un constructor y varios métodos para trabajar.

// URL = https://filisantillan.com/?name=Fili&age=24

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

let name = params.get("name");
let age = params.get("age");

console.log(name); // Fili
console.log(age); // 24

Constructor - urlSearchParams()

Crea y devuelve instancia del objeto URLSearchParams.

const params = new URLSearchParams(data);

A dicho objeto se le pueden pasar diferentes tipos de datos para utilizar sus métodos.

1. Usando el objeto URL

const myUrl = new URL("https://filisantillan.com/?name=fili&age=24");
const params = new URLSearchParams(url.search);

2. Usando strings

const params  = new URLSearchParams(window.location.search);
const params2 = new URLSearchParams("?name=Fili&age=24");

3. arrays (secuencia de pares) u objetos

const params  = new URLSearchParams([["name", "Fili"], ["age", 24]]);
const params2 = new URLSearchParams({ name: "Fili", age: 24 });

Métodos

get()

El método get devuelve el primer valor asociado al parámetro dado. Si no se llaga a encontrar, el valor será null.

// URL = https://filisantillan.com/?name=Fili&age=24

let name = params.get("name"); // Fili
let age = params.get("age"); // 24

getAll()

El método getAll devuelve todos los valores asociados al parámetro dado. Si no se llegan a encontrar, el valor será null.

// URL = https://filisantillan.com/?name=Fili&age=24&name=Roberto

let name = params.getAll("name"); // ["Fili", "Roberto"]

has()

El método has devuelve un valor booleano indicando true si existe el parámetro dado y false si no existe.

// URL = https://filisantillan.com/?name=Fili&age=24

let name = params.has("name") // true
let phone = params.has("phone") // false

toString()

El método toString devuelve el string de consulta.

// URL = https://filisantillan.com/?name=Fili&age=24

params.toString(); // name=Fili&age=24

append()

El método append agrega un nuevo parámetro/valor (key/value) a la los parámetros de búsqueda.

// URL = https://filisantillan.com/?name=Fili&age=24

params.append("instagram", "fili.santillan");
params.toString(); // name=Fili&age=24&instagram=fili.santillan

set()

El método set establece un nuevo valor para el parámetro dado. Si el parámetro no existe, el método lo crea. Si llegan a ver más valores que coincidan, el método los elimina.

// URL = https://filisantillan.com/?name=Fili&age=24

params.set("name", "Roberto"); 
params.toString(); // name=Roberto&age=24

// URL = https://filisantillan.com/?age=24

params.set("name", "Roberto");
params.toString(); // age=24&name=Roberto

// URL = https://filisantillan.com/?name=Fili&age=24&name=Luis

params.set("name", "Roberto");
params.toString(); // name=Roberto&age=24

delete()

El método delete elimina el parámetro dado y todos sus valores asociados de los parámetros de búsqueda.

// URL = https://filisantillan.com/?name=Fili&age=24&name=Roberto

params.delete("name");
params.toString(); // age=24

entries()

El método entries devuelve un iterator que permite la iteración a través de todos los pares key y value.

// URL = https://filisantillan.com/?name=Fili&age=24&instagram=fili.santillan

for(const [key, value] of params.entries()) {
	console.log(`${key}: ${value}`);
}

// name: Fili
// age: 24
// instagram: fili.santillan

keys()

El método keys devuelve un iterator que permite la iteración a través de todas las llaves (keys) obtenidas.

// URL = https://filisantillan.com/?name=Fili&age=24&instagram=fili.santillan

for(const key of params.keys()) {
  console.log(key);
}

// name
// age
// instagram

values()

El método values devuelve un iterator que permite la iteración a través de todos los valores (values) obtenidos.

// URL = https://filisantillan.com/?name=Fili&age=24&instagram=fili.santillan

for(const value of params.values()) {
  console.log(value);
}

// Fili
// 24
// fili.santillan

forEach()

El método forEach permite la iteración a través de todos los valores contenidos en el objeto mediante una función callback.

// URL = https://filisantillan.com/?name=Fili&age=24&instagram=fili.santillan

params.forEach((value, key) => {
	console.log(`${key}: ${value}`);
})

// name: Fili
// age: 24
// instagram: fili.santillan

sort()

El método sort ordena todos los pares (key/value) contenidos en el objeto. El orden se clasifica basándose en los puntos de código Unicode de las llaves (keys).

// URL = https://filisantillan.com/?name=Fili&age=24&instagram=fili.santillan

params.sort();
params.toString(); // age=24&instagram=fili.santillan&name=Fili

Recursos

• URLSearchParams MDN
• URLSearchParams in JavaScript