Lección 5

El signo más en datos de formulario

Por qué `+` a veces significa espacio y `%20` frente a `+` en query strings.

Los espacios en URLs históricamente causaban problemas, así que application/x-www-form-urlencoded (usado por defecto en <form method="GET"> HTML) codifica espacios como + en el cuerpo serializado o en la subcadena de query:

<form>
  <input name="msg" value="hello world">
</form>
<!-- Submitted URL might contain: ?msg=hello+world -->

Eso no es la misma regla que la codificación porcentual genérica de URI en todos los caminos de herramientas: muchos procesadores de URI tratan + como un signo más literal salvo que se use explícitamente la semántica form-urlencoded.

?msg=a+b           // Might decode to "a b" OR "a+b" depending on parser mode
?q=city%20hall     // Unambiguous URI percent-encoding for ASCII space (%20)

Helpers de JavaScript

URLSearchParams

const p = new URLSearchParams("a=b+c");
console.log(p.get("a")); // Likely interprets '+' as space in form mode

Crear a partir de un objeto preserva las reglas de formulario al convertir a cadena:

new URLSearchParams({ tag: "a+b" }).toString(); // Might emit a%2Bb or tag=a%2Bb pattern depending on internals for '+'
console.log(String(new URLSearchParams({ expr: "1+2" })));

Cuando dependas de literales interoperables, codifica explícitamente los signos más (%2B) si deben conservarse como más.

Errores de decodificación manual

Aplicar solo decodeURIComponent asume secuencias porcentuales — no convierte '+':

decodeURIComponent('a+b');           // stays "a+b"
decodeURIComponent('a+b'.replace(/\+/g, " ")); // manual form-style fix—only when correct for your layer

Frameworks de servidor

Los stacks populares exponen conmutadores (parsers application/x-www-form-urlencoded frente a parsers de query en bruto). El orden del middleware importa:

  1. Analizar la query con semántica de componente URI.
  2. Analizar con semántica de formulario HTML con reglas + → espacio.

Una mala configuración provoca bugs como tokens con hash que se rompen cuando '+' cambia de significado entre entornos.

Cuándo codificar qué

NecesidadRecomendación
'+' literal en un valor de campo de formulario que cruza la URLCodificar %2B en la capa del valor
'+' legible en transporte JSONPreferir cuerpos JSON, no queries
Registro de depuraciónCapturar bytes en bruto (req.url) antes de que los parsers reescriban

Entender + te ayuda a clasificar bugs: decodificación duplicada, parsers desalineados frente a entrada real del usuario que necesita %2B. Combina esta mentalidad con la advertencia de la lección 4 sobre split('&') frágil tras decodificación parcial.

Prueba +, %20 y %2B en el Codificador / Decodificador URL con ámbito de formulario frente a componente URI.

Volver al resumen del curso