Você pode pensar que encodeURI e encodeURIComponent faça a mesma coisa, pelo menos pelos nomes. E você pode ficar confuso sobre qual usar e quando.
Neste artigo, desmistificarei a diferença entre encodeURI e encodeURIComponent.
O que é um URI e como ele é diferente de um URL?
URI significa Uniform Resource Identifier.
URL significa Uniform Resource Locator.
Qualquer coisa que identifique exclusivamente um recurso é seu URI, como ID, nome ou número de ISBN. Uma URL especifica um recurso e como ele pode ser acessado (o protocolo). Todos os URLs são URIs, mas nem todos os URIs são URLs.
Por que precisamos codificar?
Os URLs podem ter apenas certos caracteres do conjunto ASCII padrão de 128 caracteres. Caracteres reservados que não pertencem a este conjunto devem ser codificados.
Isso significa que precisamos codificar esses caracteres ao passar para um URL. Caracteres especiais como &, space, ! quando inseridos em um URL precisam ser escapados, caso contrário, podem causar situações imprevisíveis.
Casos de uso:
- O usuário enviou valores em um formulário que pode estar em um formato de sequência e precisa ser passado, como campos de URL.
- É necessário aceitar os parâmetros da string de consulta para fazer solicitações GET.
Qual é a diferença entre encodeURI e encodeURIComponent?
encodeURI e encodeURIComponent são usados para codificar URIs (Uniform Resource Identifiers), substituindo certos caracteres por uma, duas, três ou quatro seqüências de escape que representam a codificação UTF-8 do caractere.
encodeURIComponent deve ser usado para codificar um URI Componente – uma string que deveria fazer parte de uma URL.
encodeURI deve ser usado para codificar um URI ou um URL existente.
Aqui está uma tabela útil da diferença na codificação de caracteres
Quais caracteres são codificados?
encodeURI() não codificará: ~!@#$&*()=:/,;?+'
encodeURIComponent() não codificará: ~!*()'
Os personagens A-Z a-z 0-9 - _ . ! ~ * ' ( ) não são escapados.
Exemplos
const url="https://www.twitter.com"console.log(encodeURI(url)) //https://www.twitter.comconsole.log(encodeURIComponent(url)) //https%3A%2F%2Fwww.twitter.comconst paramComponent="?q=search"console.log(encodeURIComponent(paramComponent)) //"%3Fq%3Dsearch"console.log(url + encodeURIComponent(paramComponent)) //https://www.twitter.com%3Fq%3DsearchQuando codificar
Ao aceitar uma entrada que pode ter espaços.
encodeURI("http://www.mysite.com/a file with spaces.html") //http://www.mysite.com/a%20file%20with%20spaces.htmlAo criar uma URL a partir de parâmetros de sequência de caracteres de consulta.
let param = encodeURIComponent('mango') let url = "http://mysite.com/?search=" + param + "&length=99"; //http://mysite.com/?search=mango&length=99Ao aceitar parâmetros de consulta que podem ter caracteres reservados.
let params = encodeURIComponent('mango & pineapple') let url = "http://mysite.com/?search=" + params; //http://mysite.com/?search=mango%20%26%20pineappleResumo
Se você tiver um URL completo, use encodeURI. Mas se você faz parte de um URL, use encodeURIComponent.
Interessado em mais tutoriais e JSBytes de mim? Inscreva-se na minha newsletter. ou Siga me no twitter
