Lição 5
O sinal de mais em dados de formulário
Por que `+` às vezes é espaço e `%20` vs `+` em query strings.
Espaços em URLs historicamente causavam problema, então application/x-www-form-urlencoded (usado por <form method="GET"> HTML padrão) codifica espaços como + no corpo serializado ou na substring de query:
<form>
<input name="msg" value="hello world">
</form>
<!-- URL enviada pode conter: ?msg=hello+world -->
Isso não é a mesma regra que codificação percentual genérica de URI em todo caminho de ferramenta: muitos processadores de URI tratam + como mais literal salvo semântica form-urlencoded explícita.
?msg=a+b // Pode virar "a b" OU "a+b" conforme o modo do parser
?q=city%20hall // Codificação percentual URI inequívoca para espaço ASCII (%20)
Helpers JavaScript
URLSearchParams
const p = new URLSearchParams("a=b+c");
console.log(p.get("a")); // Em modo form, '+' costuma virar espaço
Criar a partir de objeto preserva regras de form ao stringificar:
new URLSearchParams({ tag: "a+b" }).toString();
console.log(String(new URLSearchParams({ expr: "1+2" })));
Quando precisa de literais interoperáveis, percent-encode + explicitamente (%2B) se o sinal deve sobreviver.
Erros de decode manual
decodeURIComponent sozinho assume só sequências percent — não converte '+':
decodeURIComponent('a+b'); // permanece "a+b"
decodeURIComponent('a+b'.replace(/\+/g, " ")); // conserto manual estilo form — só na camada correta
Frameworks de servidor
Stacks populares expõem toggles (parsers application/x-www-form-urlencoded vs query bruta). Ordem de middleware importa:
- Parse da query como semântica de componente URI.
- Parse como semântica de formulário HTML com
+→ espaço.
Configuração errada quebra tokens com hash quando '+' muda de significado entre ambientes.
Quando codificar o quê
| Necessidade | Recomendação |
|---|---|
'+' literal em valor de campo na URL | %2B na camada do valor |
'+' legível em transporte JSON | Prefira corpo JSON, não query |
| Log de debug | Capture bytes brutos (req.url) antes dos parsers reescreverem |
Entender + ajuda a classificar bugs: decode duplicado, parsers desalinhados versus entrada real do usuário que precisa de %2B. Combine com a lição de query strings sobre split('&') frágil após decode parcial.
Teste +, %20 e %2B no Codificador / Decodificador URL com escopo de formulário versus componente URI.