Trabajo con URLSearchParams en JavaScript

Como ya sabes, al trabajar con formularios y solicitudes GET en JavaScript, surgen cadenas de este tipo:

let paramsString = 'a=1&b=2&c=3';

A veces es necesario cambiar mediante programación el valor de algún parámetro de esta cadena. Escribir código que haga esto no es muy cómodo. Por lo tanto, JavaScript tiene una clase especial URLSearchParams para trabajar con tales cadenas.

Vamos a crear un objeto de esta clase, pasando como parámetro nuestra cadena con parámetros:

let paramsString = 'a=1&b=2&c=3';
let searchParams = new URLSearchParams(paramsString);

Veamos qué métodos tiene el objeto creado.

Obtener el valor de un parámetro

Usando el método get puedes obtener el valor de un parámetro:

let res = searchParams.get('a');
console.log(res);

Intentemos obtener el valor de un parámetro inexistente:

let res = searchParams.get('x');
console.log(res); // mostrará null

Comprobar la existencia de un parámetro

Usando el método has puedes comprobar la existencia de un parámetro. Comprobemos un parámetro existente:

let res = searchParams.has('a');
console.log(res); // mostrará true

Comprobemos uno inexistente:

let res = searchParams.has('x');
console.log(res); // mostrará false

Conversión a cadena

Usando el método toString puedes convertir nuestro objeto de vuelta a una cadena:

let res = searchParams.toString();
console.log(res); // mostrará 'a=1&b=2&c=3'

Modificar parámetros

Usando el método set puedes cambiar el valor de un parámetro:

searchParams.set('b', 'x');

Comprobemos los cambios:

let res = searchParams.toString();
console.log(res); // mostrará 'a=1&b=x&c=3'

Agregar parámetros

Usando el método set también puedes agregar un nuevo parámetro:

searchParams.set('d', '4');

Comprobemos los cambios:

let res = searchParams.toString();
console.log(res); // mostrará 'a=1&b=2&c=3&d=4'

Agregar parámetros

Usando el método append también puedes agregar un nuevo parámetro:

searchParams.append('d', '4');

Comprobemos los cambios:

let res = searchParams.toString();
console.log(res); // mostrará 'a=1&b=2&c=3&d=4'

Intentemos agregar un parámetro que ya existe:

searchParams.append('a', '4');

En este caso, nuestro método simplemente agregará un parámetro con el mismo nombre al final:

let res = searchParams.toString();
console.log(res); // mostrará 'a=1&b=2&c=3&a=4'

En esto se manifiesta la diferencia entre los métodos set y append. El primero modificará el parámetro existente, y el segundo simplemente agregará su duplicado al final.

Eliminar parámetros

Usando el método delete puedes eliminar parámetros:

searchParams.delete('b');

Comprobemos los cambios:

let res = searchParams.toString();
console.log(res); // mostrará 'a=1&c=3'

Recorrer parámetros con un bucle

Los parámetros se pueden recorrer con un bucle:

for (let p of searchParams) {
	console.log(p);
}

Varios parámetros iguales

Supongamos que en nuestra cadena hay varios parámetros iguales:

let paramsString = 'a=1&a=2b=2&c=3';

Usando el método getAll puedes obtener un array de los valores de estos parámetros:

let res = searchParams.getAll('a');
console.dir(res); // mostrará [1, 2]

Tareas prácticas

Supongamos que se da la siguiente cadena con parámetros:

let paramsString = 'test1=param1&test2=param2&test3=param3';

Agrega a esta cadena otro parámetro test3.

Elimina de esta cadena el parámetro test2.

Cambia el parámetro test1 a un nuevo valor.