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:

  1. Parse da query como semântica de componente URI.
  2. 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ê

NecessidadeRecomendação
'+' literal em valor de campo na URL%2B na camada do valor
'+' legível em transporte JSONPrefira corpo JSON, não query
Log de debugCapture 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.

Voltar à visão geral do curso