Trabajo con URLSearchParams en JavaScript

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

javascriptlet 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:

javascriptlet 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:

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

Intentemos obtener el valor de un parámetro inexistente:

javascriptlet 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:

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

Comprobemos uno inexistente:

javascriptlet 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:

javascriptlet 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:

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

Comprobemos los cambios:

javascriptlet 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:

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

Comprobemos los cambios:

javascriptlet 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:

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

Comprobemos los cambios:

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

Intentemos agregar un parámetro que ya existe:

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

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

javascriptlet 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:

javascriptsearchParams.delete('b');

Comprobemos los cambios:

javascriptlet 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:

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

Varios parámetros iguales

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

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

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

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

Tareas prácticas

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

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