Variable not found: Obtener el valor de parámetros de la query string con JavaScript

Image may be NSFW.
Clik here to view.

Me gusta estar atento a las novedades que van apareciendo el lenguajes y frameworks que nos ayudan a mejorar la forma de hacer las cosas. Lamentablemente, en este mundo tan cambiante no es fácil estar al día en todo, y hay muchas veces que sigo haciendo cosas como siempre aunque existan fórmulas más modernas y mejores para conseguirlo.

Un ejemplo lo he encontrado hace poco, cuando, trabajando con JavaScript, una vez más he tenido necesidad de parsear la URL de la página actual en busca de los valores de los parámetros suministrados en la query string al cargar una página. Lo habitual en estos casos era tirar de Google o StackOverflow y acabar implementado una función parecida a la siguiente:

function getParameterValue(name, url = window.location.href) {
    name = name.replace(/[\[\]]/g, '\\$&');
    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

Casualmente, en este caso recordé haber leído de pasada sobre la existencia de un "nuevo" objeto de JavaScript que actualmente nos permite hacerlo de forma más sencilla, así que aproveché para ponerme un poco al día al respecto ;)

URLSearchParams es un objeto que permite parsear la query string y obtener los valores para sus parámetros de forma trivial. Basta con instanciarlo pasándole una cadena de consulta, y ya podemos acceder a los valores de los parámetros de forma sencilla:

const params = new URLSearchParams("a=1&b=Hola+mundo");
const a = params.get("a"); 
const b = params.get("b");
console.log(a); // 1
console.log(b); // Hola mundo

Observad que ya no tenemos que decodificar los valores con funciones como decodeURIComponent(), ya que el objeto URLSearchParams lo hace por nosotros. Simplemente, le solicitamos el valor del parámetro que buscamos y listo ;)

Obviamente, al constructor de este objeto normalmente no pasaremos una cadena hardcodeada como en el ejemplo anterior. Lo más habitual será pasarle la query string obtenida desde la URL actual, algo que podemos conseguir así:

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

Aunque ya lo anterior es más que suficiente para solucionar nuestro problema, otra posibilidad interesante para simplificar el acceso al valor de los parámetros es usar un objeto Proxy de la siguiente manera:

const qs = "a=1&b=Hola+mundo";
const params = new Proxy(new URLSearchParams(qs), {
  get: (searchParams, prop) => searchParams.get(prop),
});

// Ahora podemos acceder a los valores como propiedades del objeto:
const a = params.a; // 1
const b = params.b; // Hola mundo

Como se puede observar, estamos redefiniendo el getter de propiedades del Proxy, de forma que cuando intentamos obtener el valor de una de ellas, retornaremos el resultado de invocar el método get del objeto URLSearchParams.

¿Y si queremos recorrer todos los parámetros? En este caso es bueno saber que el objeto URLSearchParamses iterable, por lo que podemos usar un for..of para recorrerlos:

const params = new URLSearchParams(window.location.search)
for (let [key, value] of params) {
  console.log(key, value);
}

Aparte de todo lo anterior, que ya justificaría la existencia de URLSearchParams, es interesante saber que este objeto también nos permite construir query strings sin tener que andar concatenando cadenas de texto y codificando valores a mano.

Para ello, podemos utilizar métodos como set() o append() para establecer o añadir parámetros de la query string, y finalmente construir una cadena de texto invocando a su método toString().

const params = new URLSearchParams();
params.set("a", 1); 
params.set("b", "Hola mundo");
console.log(params.toString()); // a=1&b=Hola+mundo

Incluso podemos pasar un objeto como parámetro al constructor de URLSearchParams para construir rápidamente la query string que necesitamos:

const obj = { a: 1, b: "Hola mundo" };
const params = new URLSearchParams(obj);
console.log(params.toString()); // a=1&b=Hola+mundo

Por último, vale la pena mencionar que URLSearchParams lleva ya varios años estando disponible en todos los navegadores modernos, pero si necesitáis usarlo en aplicaciones que pueden utilizar usuarios que aún naveguen en galeones de otra época, podéis usar un polyfill que os proporcione las mismas funcionalidades.

Espero que, si como el que os escribe, faltasteis a clase el día que explicaron este objeto, este post os haya sido de utilidad. Y para más información, os recomiendo que visitéis la entrada de URLSearchParams en la MDN :)

Publicado en Variable not found.