JS метод Global.encodeURIComponent()

Загальний опис

encodeURIComponent() - це метод JavaScript, призначений для кодування компонентів URI. Завдяки ньому можна забезпечити коректну передачу даних в мережі, особливо коли мова йде про передачу спеціальних символів, які можуть порушити стандартну структуру URI.

Перш за все, розглянемо, навіщо потрібен цей метод. При роботі в Інтернеті дуже часто доводиться стикаються з потребою передачі даних через URL. Ці дані можуть включати символи, такі як пробіли, символи пунктуації та інші спеціальні символи, які потребують спеціального кодування, щоб безпечно та коректно передаватися в URI. Саме для цього і призначений метод encodeURIComponent().

Як і де використовувати цей метод? Найчастіше метод encodeURIComponent() використовується при створенні запитів до веб-сервера, коли потрібно передати параметри через URL. Додатково він корисний при роботі з AJAX, коли дані передаються на сервер асинхронно. Зокрема, якщо ви намагаєтеся передати текст, що містить пробіли або символи пунктуації, ви швидко зіткнетеся з проблемами, якщо не скористаєтеся цим методом.

Приклад:

var userName = "Тарас Тараскін";
var encodedName = encodeURIComponent(userName);
console.log(encodedName); // Виведе "Тарас%20Тараскін"

В цьому прикладі ми бачимо, як пробіл у тексті замінюється на код %20, який є безпечним для передачі в URL.

Основні особливості та прийоми роботи з encodeURIComponent() полягають в тому, що він кодує більше символів, ніж encodeURI(). Він призначений для кодування індивідуальних компонентів URI, а не цілих URI. Тому, якщо ви намагаєтеся закодувати цілий URL, цей метод не підійде.

Важлива відмінність від інших методів, таких як encodeURI(), полягає в деталізації кодування. Доки encodeURI() кодує URI повністю, encodeURIComponent() зосереджений на окремих його компонентах.

Нотатка:

Якщо ви працюєте із системами, які вже можуть автоматично кодувати URI (наприклад, деякі бібліотеки AJAX), будьте обережні, щоб не "подвійно" кодувати URI, використовуючи encodeURIComponent(). Подвійне кодування може призвести до проблем при декодуванні та обробці на сервері.

Порада:

Якщо ви хочете передати цілий URL з параметрами, не варто кодувати весь URL за допомогою encodeURIComponent(). Замість цього кодуйте лише значення параметрів. Це допоможе уникнути непередбачуваних проблем із неправильним інтерпретуванням URL.

Приклад:

var baseURL = "https://example.com/search?";
var queryParam = "query";
var queryValue = "Hello & Goodbye";
var finalURL = baseURL + queryParam + "=" + encodeURIComponent(queryValue);

Порада:

Коли передаєте дані з HTML-форми через AJAX або інший механізм, завжди використовуйте encodeURIComponent() для значень, щоб уникнути конфліктів із спеціальними символами.

Синтаксис

encodeURIComponent(uriComponent)

Параметри

*uriComponent: Рядок, який слід закодувати як компонент URI (шлях, рядок запиту, фрагмент тощо). Інші значення конвертуються в рядки.

Return

string: Повертає новий рядок, який представляє наданий $uriComponent$ , закодований як компонент URI.

Exception

URIError: викидується, якщо uriComponent містить окремий сурогатний символ, який не може бути закодований.

Переглядачі

Переглядач
	1	1	1.1	7	12

Переглядач
	4.4	18	4	1

Переглядач
	0.10.0	1.0

Приклади

Цей приклад демонструє використання методу encodeURIComponent(). Користувач може ввести довільний текст у перше поле і натиснути кнопку "Кодувати". Результат кодування буде відображений у другому полі, яке показує закодований текст. Таким чином, користувач може побачити, як текст змінюється після кодування, і які символи стають закодованими.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/GRPYRRJ">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

У цьому прикладі ми маємо ім'я користувача "Іван Петрович". Для того, щоб безпечно передати це ім'я як параметр у URL, нам потрібно його закодувати. Метод encodeURIComponent() допомагає нам в цьому, перетворюючи символи, які можуть бути небезпечними для URL, на їхнє кодове представлення.

// Оголошуємо змінну з іменем користувача
let userName = "Іван Петрович";

// Кодуємо ім'я користувача для безпечного використання в URL
let encodedName = encodeURIComponent(userName);

// Створюємо URL з використанням закодованого імені
let userURL = "https://example.com/profile?name=" + encodedName;

console.log(userURL); // Виводить: https://example.com/profile?name=%D0%86%D0%B2%D0%B0%D0%BD%20%D0%9F%D0%B5%D1%82%D1%80%D0%BE%D0%B2%D0%B8%D1%87

У цьому прикладі ми створюємо рядок запиту для AJAX на основі об'єкта даних. Для кожного ключа та значення в об'єкті ми використовуємо encodeURIComponent(), щоб гарантувати, що всі ключі та значення безпечно кодуються для включення до URL. Такий підхід особливо корисний, коли нам потрібно передати багато параметрів через URL у AJAX запитах.

// Функція для створення рядка запиту на основі об'єкта даних
function createQueryString(data) {
    let queryString = [];

    for (let key in data) {
        queryString.push(encodeURIComponent(key) + "=" + encodeURIComponent(data[key]));
    }

    return queryString.join("&");
}

// Приклад використання
let formData = {
    "userName": "Іван Петрович",
    "userAge": "35"
};

let ajaxURL = "https://example.com/api?" + createQueryString(formData);

console.log(ajaxURL); // Виводить: https://example.com/api?userName=%D0%86%D0%B2%D0%B0%D0%BD%20%D0%9F%D0%B5%D1%82%D1%80%D0%BE%D0%B2%D0%B8%D1%87&userAge=35

JS довідник

JavaScript

Наповнення JS розділу