JS метод Global.encodeURI()

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

encodeURI() є вбудованим методом у JavaScript, який призначений для кодування тексту в формат, який є безпечним і придатним для використання в уніфікованих ідентифікаторах ресурсів (URI). Завдяки йому можна гарантувати, що URL-адреси будуть читатися і інтерпретуватися правильно між різними ресурсами і платформами.

Однією з основних причин використання encodeURI() є потреба забезпечити, що спеціальні символи в URL-адресі, такі як "&", "#", " ", та інші, не будуть викликати непередбачених проблем під час переходу по посиланню або відправки запиту. Інакше кажучи, цей метод перетворює символи в URL-адресі в їх відсоткове кодування, яке може бути безпечно передано через інтернет.

Приклад:

const url = "Hello World!";
const encodedURL = encodeURI(url);
console.log(encodedURL); // Hello%20World%21

У цьому прикладі пробіл в "Hello World!" було закодовано як %20, а знак оклику – як %21.

encodeURI() корисний у ряді сценаріїв. Наприклад, при додаванні даних, отриманих від користувача, до URL-адреси перед відправкою запиту на сервер або при створенні посилань, що включають динамічний контент.

Важливо відзначити, що encodeURI() кодує лише ті символи, які мають спеціальне значення у URI. Він не кодує символи, такі як ":", "/", "?" та "@", оскільки вони вважаються дійсними символами в структурі URL. Якщо потрібно кодувати кожний символ у тексті, рекомендується використовувати encodeURIComponent() замість encodeURI().

Приклад відмінностей:

const data = "Hello, how are you? Have a nice day!";
const uri = encodeURI(data);
const uriComponent = encodeURIComponent(data);
console.log(uri); // Hello,%20how%20are%20you?%20Have%20a%20nice%20day!
console.log(uriComponent); // Hello%2C%20how%20are%20you%3F%20Have%20a%20nice%20day%21

Як бачимо, encodeURIComponent() кодує більше символів, ніж encodeURI().

правити

Порада

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

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

Порада

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

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

Порада

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

Приклад:

const base = "https://example.com/query?";
const param = "name=John&age=20";
const encodedURL = base + encodeURIComponent(param);

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

Нотатка

Пам'ятайте, що повторне кодування вже закодованого URL може призвести до непередбачуваних результатів. Додавання додаткового кодування до вже закодованого URL може зробити його непридатним для використання.

Приклад:

const encodedParam = encodeURIComponent("name=John&age=20");
const doubleEncoded = encodeURIComponent(encodedParam); // Неправильно!

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

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

Синтаксис

encodeURI(uri)

Параметри

uri

Рядок, який потрібно закодувати як URI.

автор: Bond

правити

Повернення

string

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

автор: Bond

правити

Винятки

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

Переглядачі

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

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

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

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

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

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

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

Приклади

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

// Базова URL адреса
const baseURL = "https://example.com/search?query=";

// Рядок пошуку, введений користувачем
const userQuery = "Книги про JavaScript&author=Джон";

// Кодуємо рядок запиту, щоб можна було його безпечно додати до URL
const encodedURL = baseURL + encodeURI(userQuery);

console.log(encodedURL);
// Виведе: "https://example.com/search?query=Книги%20про%20JavaScript&author=%D0%94%D0%B6%D0%BE%D0%BD"

// Заголовок новини, який користувач хоче поділитися
const newsTitle = "Новий курс про JavaScript в Україні!";

// Кодуємо заголовок, щоб створити URL для ділитися новиною у Twitter
const shareURL = "https://twitter.com/intent/tweet?text=" + encodeURI(newsTitle);

console.log(shareURL);
// Виведе: "https://twitter.com/intent/tweet?text=Новий%20курс%20про%20JavaScript%20в%20Україні!"