Codificação de URL em JavaScript — encodeURI, encodeURIComponent e Boas Práticas

O JavaScript fornece duas funções integradas para codificação de URL:

encodeURIComponent()

Codifica todos os caracteres, exceto: A-Z a-z 0-9 - _ . ! ~ * ' ( )

const name = 'John Doe'
const query = '?name=' + encodeURIComponent(name)
// ?name=John%20Doe

Use-a para codificar valores individuais de parâmetros de consulta, segmentos de caminho ou qualquer dado que se torne parte de uma URL.

encodeURI()

Codifica todos os caracteres, exceto os acima e os caracteres reservados de URL: : / ? # [ ] @ ! $ & ' ( ) * + , ; =

const url = 'https://example.com/search?q=hello world'
const encoded = encodeURI(url)
// https://example.com/search?q=hello%20world

Use-a ao codificar uma string de URL completa.

Armadilha Comum

// WRONG — breaks the URL structure
encodeURIComponent('https://example.com/page')
// https%3A%2F%2Fexample.com%2Fpage

// RIGHT — preserves structure
encodeURI('https://example.com/page')
// https://example.com/page

Teste essas funções ao vivo com nossa ferramenta de codificador/decodificador de URL.