Ferramentas de desenvolvedor · Codificador e decodificador URL
Por que + se torna um espaço quando você decodifica uma string de consulta e quando isso não acontece
· Como funciona
codificação de URL javascript fluxo de trabalho do desenvolvedor
Se + significa espaço depende de qual decodificador você chama. Esta postagem explica como decodeURIComponent, URLSearchParams e estruturas de servidor tratam + e como evitar transformar uma vantagem real em um espaço.
Por que + se torna um espaço quando você decodifica uma string de consulta e quando isso não acontece
Os envios de formulários HTML usam o formato application/x-www-form-urlencoded, onde o espaço se torna um sinal de mais. Um servidor que recebe name=Alice+Smith substitui cada sinal de adição por espaço antes de extrair o valor. Quando um sinal positivo pertence aos dados, como em um cálculo 5+3, ele chega ao servidor como 5 3 após a etapa de decodificação do formulário. Esta conversão invisível é a raiz da confusão.
A decodificação JavaScript produz resultados diferentes dependendo de qual função você usa. URLSearchParams trata o plus como espaço, correspondendo ao comportamento do servidor. Mas decodeURIComponent deixa o plus intocado, tratando-o literalmente. Essa assimetria entre funções é a razão pela qual a mesma entrada é decodificada de maneira diferente. Um desenvolvedor que espera que ambos os decodificadores produzam o mesmo resultado descobre que não.
Duas codificações semelhantes — RFC 3986 codificação percentual versus aplicação/x-www-form-urlencoded
Dois padrões de codificação parecem semelhantes, mas funcionam de maneira diferente. RFC 3986 define a codificação percentual: qualquer caractere se torna% HH. O espaço se torna %20. O padrão application/x-www-form-urlencoded adiciona uma abreviação: o espaço pode ser mais. Ambos funcionam no contexto do formulário, mas plus é opcional e específico para esse padrão. São domínios diferentes com aparência semelhante.
Chamar decodeURIComponent aplica apenas a decodificação RFC 3986. Ele lê %20 como espaço e mais como mais literal. URLSearchParams aplica regras de decodificação de formulário: escapes percentuais tornam-se seus caracteres e mais torna-se espaço. As duas funções resolvem o mesmo problema em domínios diferentes. Misturá-los faz com que um sinal de mais real desapareça ou um espaço se torne um sinal de mais e não seja convertido.
decodeURIComponent deixa + sozinho; URLSearchParams transforma-o em um espaço — os dois comportamentos JavaScript comparados
O comportamento do servidor varia, o que agrava o problema. Rails ou Django aplicam automaticamente a regra do formulário: mais se torna espaço. Mas extrair e decodificar manualmente a string de consulta bruta com um decodificador URL deixa o plus intacto. O mesmo valor processado por estruturas diferentes produz resultados diferentes. O código do servidor geralmente lida com isso implicitamente, ocultando o problema até que você escreva um decodificador personalizado.
Exemplo: um campo de número de telefone armazena +1-555-0100 com mais como código do país. Um formulário HTML codifica-o como %2B1-555-0100 porque JavaScript codificou mais como %2B. O servidor recebe isso. Se aplicar a decodificação de formulário, %2B se torna mais e o valor está correto. Se um proxy remover a codificação, chamar decodeURIComponent no resultado produzirá +1-555-0100. Cada camada é decodificada uma vez.
O que os servidores fazem — comportamento comum da estrutura na string de consulta e no corpo da solicitação, descrito em termos gerais
JavaScript pode codificar valores usando encodeURIComponent. Dado a+b, produz a%2Bb. Quando essa string codificada atinge um servidor ou decodificador com reconhecimento de formulário, %2B é decodificado como mais e o resultado está correto. Se você codificar usando a regra de formulário, um espaço se tornará um sinal de mais e um sinal de mais real se tornará %2B. De qualquer forma, a codificação produz%2Bb. A interpretação depende de qual regra de decodificação se aplica.
Teste a viagem de ida e volta: comece com a+b. Codifique com encodeURIComponent para obter%2Bb. Decodifique a%2Bb com decodeURIComponent e recupere a+b. Passe a+b para URLSearchParams: trata mais como espaço, produzindo um b. Passe a%2Bb para URLSearchParams para obter a+b de volta. A mesma entrada decodificada de duas maneiras produz saídas diferentes dependendo de qual decodificador você usa.
Exemplo resolvido: 'a+b' e 'a%2Bb' através de ambos os decodificadores — quatro resultados em uma tabela
Erros comuns seguem diretamente. Um desenvolvedor decodifica com decodeURIComponent e se pergunta por que os dados de formulário recebidos com um sinal positivo real são interrompidos. Eles deveriam ter usado URLSearchParams. Por outro lado, alguém usa URLSearchParams quando deveria usar decodeURIComponent, e todo sinal de adição literal desaparece. A codificação dupla produz %252B, exigindo pares codificadores-decodificadores correspondentes para decodificar corretamente.
Outro erro é construir uma string de consulta manualmente como ?q=value sem codificação. Qualquer E comercial ou igual no valor cria silenciosamente um novo parâmetro. O navegador não questiona a concatenação; trata o resultado como formado corretamente. Somente a codificação intencional com encodeURIComponent evita isso. O codificador e decodificador URL mostra todas as três funções, revelando o que cada uma produz.
Erros comuns — decodificação duas vezes ou codificação de um espaço como + em um segmento de caminho
A regra de codificação de formulário é chamada application/x-www-form-urlencoded porque descreve o cabeçalho Content-Type do corpo da solicitação HTTP. HTML formulários sem upload de arquivo enviam o corpo neste formato. As strings de consulta em URLs também usam essa convenção, embora tecnicamente não tenham um padrão de codificação oficial. As especificações URL tratam a consulta como opaca; mais o significado não é obrigatório. Mas em aplicações web, plus geralmente significa espaço.
Para garantir o comportamento correto, codifique deliberadamente e decodifique com a função correspondente. Se você codificou com encodeURIComponent, decodifique com decodeURIComponent. Se estiver lendo dados do formulário HTML ou solicitando corpos em formato de formulário, use URLSearchParams. Nunca adivinhe com base na aparência. Uma string como a+b é ambígua. Os decodificadores não são intercambiáveis.
O que isso não cobre — dados de formulário multipartes e corpos de solicitação JSON
Dados de formulário multipartes, corpos de solicitação JSON e outros padrões têm regras de codificação separadas. JSON não usa sinal de adição para espaço ou codificação percentual; ele usa escapes Unicode. Multipart usa limites diferentes. Este artigo cobre apenas strings de consulta e corpos codificados por formulário, porque é aí que aparece a ambiguidade positiva. Verifique sempre o cabeçalho Content-Type e o RFC que o define.
Sempre codifique um acréscimo literal como %2B quando ele pertencer a um valor de consulta. O codificador e decodificador URL mostra como o plus é protegido como %2B no modo componente, separado dos espaços que se tornam %20. Passe a+b e a%2Bb por cada modo e examine os resultados. Essa comparação mostra por que a mesma entrada é decodificada de maneira diferente. A diferença é o comportamento correto de dois padrões diferentes.
Conclusão: sempre codifique um sinal de adição literal como% 2B - como o codificador e decodificador URL mostra a aparência de um valor como um valor de consulta codificado por porcentagem
Conclusão: mais em uma string de consulta é a forma abreviada de codificação para espaço, não um sinal de mais literal, a menos que venha de uma codificação que o protegeu como% 2B. O decodificador errado perde essa proteção. URLSearchParams é mais seguro no JavaScript moderno; ele lida com a codificação de formulários e fornece acesso a parâmetros nomeados. Para strings brutas, encodeURIComponent protege tudo; decodeURIComponent interpreta %20 e porcentagens, mas trata o plus literalmente.
Teste isto: construa ?x=a+b manualmente e cole no codificador e decodificador URL. Inspecione-o e observe URLSearchParams dividi-lo no parâmetro x com valor a b. Cole ?x=a%2Bb e veja o valor a+b. Use encodeURIComponent para construir o URL e comparar. Essa confirmação visual esclarece a regra: as regras do formulário usam plus, a codificação percentual usa %20, misturá-las é o motivo pelo qual o plus desaparece no espaço.