Cómo obtener los query params en JavaScript vanilla
Obtener los parámetros de consulta (query params) en JavaScript vanilla es una tarea común cuando trabajas con URLs. Estos parámetros suelen ser usados para enviar información a través de la URL, y JavaScript permite extraerlos de forma sencilla utilizando el objeto URLSearchParams.
Métodos para obtener query params en JavaScript
En JavaScript vanilla, los query params se extraen utilizando el objeto window.location y la clase URLSearchParams. A continuación, te explicamos el proceso paso a paso:
1. Obtener la URL actual: Usa window.location.href para acceder a la URL.
2. Extraer la cadena de consulta: Utiliza window.location.search para obtener los parámetros después del signo ?.
3. Crear un objeto URLSearchParams: Este objeto permite manipular y acceder fácilmente a los parámetros.
Ejemplo básico
// Supongamos una URL: https://example.com?name=Juan&age=25
// Paso 1: Extraer la cadena de consulta
const queryString = window.location.search;
// Paso 2: Crear un objeto URLSearchParams
const params = new URLSearchParams(queryString);
// Paso 3: Obtener los valores de los parámetros
const name = params.get("name"); // "Juan"
const age = params.get("age"); // "25"
console.log(name, age);Iterar sobre los parámetros
Si deseas listar todos los parámetros, puedes usar el método forEach:
params.forEach((value, key) => {
console.log(`${key}: ${value}`);
});
Tabla de métodos útiles de URLSearchParams
| Método | Descripción |
|---|---|
get(param)
|
Obtiene el valor de un parámetro específico. |
has(param)
|
Verifica si un parámetro existe. |
set(param, value)
|
Establece o actualiza un parámetro. |
delete(param)
|
Elimina un parámetro de la URL. |
keys()
|
Devuelve un iterador con las claves. |
values()
|
Devuelve un iterador con los valores. |
entries()
|
Devuelve un iterador con pares clave-valor. |
Ejemplo práctico con parámetros dinámicos
// URL: https://example.com?product=123&category=books
const queryString = window.location.search;
const params = new URLSearchParams(queryString);
if (params.has("product")) {
console.log(`ID del producto: ${params.get("product")}`);
}
if (params.has("category")) {
console.log(`Categoría: ${params.get("category")}`);
}Referencia oficial
Para más información, consulta la documentación oficial de MDN Web Docs sobre URLSearchParams.
Jorge García
Fullstack developer