Query strings y parámetros

Todo lo que sigue al primer ? en una URL http(s) inicia el componente de query — una cadena interpretada como pares al estilo application/x-www-form-urlencoded por la mayoría de navegadores y frameworks de servidor, incluso cuando el formulario no es HTML literal.

https://api.example.com/items?tag=book&sort=price_asc&page=2

El análisis sintáctico revela tres claves: tag, sort, page.

Sintaxis de pares

• Los pares se separan con & (históricamente ; aparece en tráfico salvaje, pero se desaconseja sin soporte explícito).
• Dentro de un par, el primer = separa nombre de valor:
  • flag → cadena vacía como valor en muchos parsers
  • q= → valor vacío
  • q=ruby+gems → los signos más literales pueden significar espacios bajo reglas de formulario (véase la lección 5).

?q=hello&empty=&flag

Repetir claves está permitido por el formato en la red:

?tag=a&tag=b

La interpretación (conservar el último frente a recopilar un array) depende del framework — nunca lo des por hecho.

Codificar valores antes de concatenar

Si un valor contiene &, =, # o texto no ASCII, codifica el componente antes de unir:

const base = "https://example.com/search";
const params = new URLSearchParams({ q: "fish & chips", city: "São Paulo" });
const url = `${base}?${params.toString()}`;

Usar URL mantiene sanos los delimitadores:

const url = new URL("https://example.com/search");
url.searchParams.set("q", "100% completion");
console.log(url.toString());

Trampas al analizar

Un split('&') manual falla cuando un & suelto aparece dentro de valores ya decodificados:

// Looks fine until decoding reveals extra &
decodeURIComponent('a=b%26c=d')

Prefiere URL (searchParams), bibliotecas de servidor o parsers que iteren bytes con el estado correcto en lugar de splits ingenuos de cadenas tras una decodificación parcial.

URLs relativas y contexto HTML

Los enlaces <a href="..."> resuelven URLs relativas respecto a la base del documento:

<a href="?page=2">Next</a>

Eso puede sorprenderte si esperabas una ruta absoluta — entiende el orden de resolución (scheme → host → path → reglas de adición de query).

Orden y normalización

Algunas URLs firmadas o cachés tratan el orden de parámetros como significativo. Al generar cadenas canónicas para firmas, define si ordenas claves y cómo aplicas codificación porcentual — la firma al estilo AWS y la string-to-sign de OAuth 1.0 son ejemplos clásicos de canonicalización estricta más allá del comportamiento casual del navegador.

Dominar las query strings consiste sobre todo en límites de componente y elegir la capa de codificación correcta en cada nivel de tu stack.

Monta e inspecciona pares en el modo query del Codificador / Decodificador URL antes de depurar redirects o callbacks OAuth.