Пример за кодиране на URL на JavaScript - Как да използвам encodeURIcomponent () и encodeURI ()

Програмиране

Може да си помислите това 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 да се избяга, в противен случай те могат да доведат до непредвидими ситуации.

Случаи на употреба:

  1. Потребителят е изпратил стойности във форма, която може да е във формат на низове и трябва да бъде предадена, като полета за URL адреси.
  2. Трябва да приемете параметри на низа на заявката, за да направите 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

Кога да се кодира

  1. Когато приемате вход, който може да има интервали.

    encodeURI("//www.mysite.com/a file with spaces.html") ////www.mysite.com/a%20file%20with%20spaces.html

  2. При изграждане на URL от параметри на низа на заявката.

     let param = encodeURIComponent('mango') let url = "//mysite.com/?search=" + param + "&length=99"; ////mysite.com/?search=mango&length=99

  3. Когато приемате параметри на заявката, които може да имат запазени символи.

 let params = encodeURIComponent('mango & pineapple') let url = "//mysite.com/?search=" + params; ////mysite.com/?search=mango%20%26%20pineapple

Обобщение

Ако имате пълен URL, използвайте encodeURI. Но ако имате част от URL, използвайте encodeURIComponent.

Интересувате ли се от повече уроци и JSBytes от мен? Регистрирайте се за моя бюлетин. или ме последвайте в Twitter