Cómo obtener parámetros de URL en JavaScript: análisis bajo el capó

Parámetros de URL en JavaScript: de lo simple a lo complejo

Cada desarrollador se ha enfrentado al menos una vez a la tarea: necesita extraer datos de la barra de direcciones del navegador. Abre una página, ve algo como /products?id=42&category=books y comprende: en algún lugar dentro de este conjunto de caracteres se esconden datos importantes. ¿Cómo obtenerlos? La pregunta, que ha reunido miles de votos en Stack Overflow, suena así: "How can I get query string values in JavaScript?". Hoy no solo daremos una respuesta preparada: nos adentraremos bajo el capó de este proceso y analizaremos cómo funciona el análisis de URL en JavaScript en todos los niveles.

¿Por qué es importante? Porque los parámetros de URL son la base de la web moderna. Transferencia de datos entre páginas, filtrado de productos, analítica, enlaces de referencia: todo esto se construye sobre simples cadenas después del signo de interrogación. Y si escribe en JavaScript, saber trabajar con query string no es una opción, sino una habilidad obligatoria.

¿Qué es una query string y cómo verla en el navegador?

Para empezar, aclaremos los términos. Query string (cadena de consulta) es la parte de la URL que comienza después del signo de interrogación. Por ejemplo, en la dirección:

https://example.com/search?q=javascript&lang=ru&page=1

todo lo que va después de ? es la query string. Consiste en pares clave=valor, separados por el signo ampersand (&). Cada clave puede aparecer varias veces, y es importante recordarlo.

Para obtener esta cadena en JavaScript, basta con acceder a la propiedad:

const queryString = window.location.search;\nconsole.log(queryString); // "?q=javascript&lang=ru&page=1"

Tenga en cuenta: la propiedad devuelve la cadena junto con el signo de interrogación. Este es el punto de partida para todas las manipulaciones posteriores.

Método n.º 1: URLSearchParams — moderno y sencillo

Si escribe código para navegadores modernos (que es el 99% de los casos), use la API integrada URLSearchParams. Apareció en 2016 y desde entonces se ha convertido en el estándar de facto para trabajar con parámetros de URL. Veamos cómo funciona:

// Obtenemos la cadena de consulta\nconst queryString = window.location.search;\n\n// Creamos un objeto URLSearchParams\nconst params = new URLSearchParams(queryString);\n\n// Obtenemos el valor por clave\nconst q = params.get('q');       // "javascript"\nconst lang = params.get('lang'); // "ru"\nconst page = params.get('page'); // "1"\n\n// Verificamos si existe el parámetro\nconsole.log(params.has('lang')); // true\n\n// Obtenemos todos los valores si la clave se repite\nparams.append('q', 'python');\nconsole.log(params.getAll('q')); // ["javascript", "python"]\n\n// Iteramos sobre todos los parámetros\nfor (const [key, value] of params) {\n    console.log(`${key}: ${value}`);\n}\n// Salida:\n// q: javascript\n// lang: ru\n// page: 1\n// q: python

Bajo el capó, URLSearchParams decodifica automáticamente los caracteres codificados (por ejemplo, convierte %20 en espacio) y maneja correctamente casos complejos como claves repetidas. Esto no solo es conveniente, sino seguro.

¿Cómo funciona bajo el capó?

Cuando crea new URLSearchParams(queryString), el motor de JavaScript realiza los siguientes pasos:

\n
• Elimina el signo de interrogación inicial (si lo hay).
\n
• Divide la cadena por el carácter &, obteniendo un array de pares.
\n
• Divide cada par por el primer carácter = en clave y valor.
\n
• Decodifica los componentes URI — reemplaza %20 por espacio, %23 por #, y así sucesivamente.
\n
• Guarda todo en una estructura donde a cada clave le corresponde un array de valores (incluso si es solo uno).
\n

Este proceso es completamente reversible. Puede modificar los parámetros