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() зосереджений на окремих його компонентах.

правити

Порада

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

автор: Bond правити

Порада

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

Приклад:

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

автор: Bond правити

Нотатка

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

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

encodeURIComponent(uriComponent)

Параметри

uriComponent

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

автор: Bond

правити

Повернення

string

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

автор: Bond

правити

Винятки

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

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

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

Підтримка: мобільні переглядачі

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

Підтримка: серверні переглядачі

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

Приклади

+ запропонувати свій приклад у пісочниці

// Оголошуємо змінну з іменем користувача
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

// Функція для створення рядка запиту на основі об'єкта даних
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