Може да си помислите това encodeURI
и да encodeURIComponent
направите същото, поне от техните имена. И може да се объркате кой да използвате и кога.
В тази статия ще демистифицирам разликата между encodeURI
и encodeURIComponent
.
Какво е URI и как се различава от URL?
URI означава Uniform Resource Identifier.
URL означава Uniform Resource Locator.
Всичко, което уникално идентифицира ресурс, е неговият URI, като идентификатор, име или номер на ISBN. URL адресът посочва ресурс и как може да бъде достъпен (протоколът). Всички URL адреси са URI, но не всички URI са URL адреси.
Защо трябва да кодираме?
URL адресите могат да имат само определени знаци от стандартния набор от 128 символа ASCII. Запазените символи, които не принадлежат към този набор, трябва да бъдат кодирани.
Това означава, че трябва да кодираме тези знаци, когато преминаваме в URL. Специални знаци, като например &
, space
, !
когато влезе в нужда URL да се избяга, в противен случай те могат да доведат до непредвидими ситуации.
Случаи на употреба:
- Потребителят е изпратил стойности във форма, която може да е във формат на низове и трябва да бъде предадена, като полета за URL адреси.
- Трябва да приемете параметри на низа на заявката, за да направите GET заявки.
Каква е разликата между encodeURI и encodeURIComponent?
encodeURI
и encodeURIComponent
се използват за кодиране на унифицирани идентификатори на ресурси (URI) чрез замяна на определени символи с една, две, три или четири екраниращи последователности, представляващи UTF-8 кодирането на символа.
encodeURIComponent
трябва да се използва за кодиране на URI компонент - низ, който се предполага, че е част от URL адрес.
encodeURI
трябва да се използва за кодиране на URI или съществуващ URL адрес.
Ето една удобна таблица за разликата в кодирането на символите
Кои знаци са кодирани?
encodeURI()
няма да кодира: [email protected]#$&*()=:/,;?+'
encodeURIComponent()
няма да кодира: ~!*()'
Героите A-Z a-z 0-9 - _ . ! ~ * ' ( )
не са избягали.
Примери
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
Кога да се кодира
Когато приемате вход, който може да има интервали.
encodeURI("//www.mysite.com/a file with spaces.html") ////www.mysite.com/a%20file%20with%20spaces.html
При изграждане на URL от параметри на низа на заявката.
let param = encodeURIComponent('mango') let url = "//mysite.com/?search=" + param + "&length=99"; ////mysite.com/?search=mango&length=99
Когато приемате параметри на заявката, които може да имат запазени символи.
let params = encodeURIComponent('mango & pineapple') let url = "//mysite.com/?search=" + params; ////mysite.com/?search=mango%20%26%20pineapple
Обобщение
Ако имате пълен URL, използвайте encodeURI
. Но ако имате част от URL, използвайте encodeURIComponent
.
Интересувате ли се от повече уроци и JSBytes от мен? Регистрирайте се за моя бюлетин. или ме последвайте в Twitter