Podrías pensar eso encodeURI
y encodeURIComponent
hacer lo mismo, al menos por sus nombres. Y puede confundirse cuál usar y cuándo.
En este artículo, desmitificaré la diferencia entre encodeURI
y encodeURIComponent
.
¿Qué es un URI y en qué se diferencia de una URL?
URI son las siglas de Uniform Resource Identifier.
URL son las siglas de Uniform Resource Locator.
Todo lo que identifique de forma única un recurso es su URI, como id, nombre o número ISBN. Una URL especifica un recurso y cómo se puede acceder a él (el protocolo). Todas las URL son URI, pero no todas las URI son URL.
¿Por qué necesitamos codificar?
Las URL solo pueden tener ciertos caracteres del conjunto ASCII estándar de 128 caracteres. Los caracteres reservados que no pertenecen a este conjunto deben estar codificados.
Esto significa que debemos codificar estos caracteres al pasar a una URL. Los caracteres especiales tales como &
, space
, !
cuando entró en una necesidad URL que se escaparon, de lo contrario pueden causar situaciones impredecibles.
Casos de uso:
- El usuario ha enviado valores en un formulario que puede estar en formato de cadena y debe pasarse, como campos de URL.
- Necesita aceptar parámetros de cadena de consulta para realizar solicitudes GET.
¿Cuál es la diferencia entre encodeURI y encodeURIComponent?
encodeURI
y encodeURIComponent
se utilizan para codificar identificadores uniformes de recursos (URI) reemplazando ciertos caracteres por una, dos, tres o cuatro secuencias de escape que representan la codificación UTF-8 del carácter.
encodeURIComponent
debe usarse para codificar un componente URI , una cadena que se supone que es parte de una URL.
encodeURI
debe usarse para codificar un URI o una URL existente.
Aquí hay una práctica tabla de la diferencia en la codificación de caracteres.
¿Qué caracteres están codificados?
encodeURI()
no codificará: ~!@#$&*()=:/,;?+'
encodeURIComponent()
no codificará: ~!*()'
Los personajes A-Z a-z 0-9 - _ . ! ~ * ' ( )
no se escapan.
Ejemplos
const url = '//www.twitter.com' console.log(encodeURI(url)) ////www.twitter.com console.log(encodeURIComponent(url)) //https%3A%2F%2Fwww.twitter.com const paramComponent = '?q=search' console.log(encodeURIComponent(paramComponent)) //"%3Fq%3Dsearch" console.log(url + encodeURIComponent(paramComponent)) ////www.twitter.com%3Fq%3Dsearch
Cuando codificar
Al aceptar una entrada que puede tener espacios.
encodeURI("//www.mysite.com/a file with spaces.html") ////www.mysite.com/a%20file%20with%20spaces.html
Al crear una URL a partir de parámetros de cadena de consulta.
let param = encodeURIComponent('mango') let url = "//mysite.com/?search=" + param + "&length=99"; ////mysite.com/?search=mango&length=99
Al aceptar parámetros de consulta que pueden tener caracteres reservados.
let params = encodeURIComponent('mango & pineapple') let url = "//mysite.com/?search=" + params; ////mysite.com/?search=mango%20%26%20pineapple
Resumen
Si tiene una URL completa, utilice encodeURI
. Pero si tiene parte de una URL, use encodeURIComponent
.
¿Interesado en más tutoriales y JSBytes de mi parte? Inscríbete a mi boletín de noticias. o sígueme en Twitter