Приклад кодування 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