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 може призвести до непередбачуваних результатів. Додавання додаткового кодування до вже закодованого URL може зробити його непридатним для використання. Приклад: `const encodedParam = encodeURIComponent("name=John&age=20"); const doubleEncoded = encodeURIComponent(encodedParam); // Неправильно!`
Порада:	Перед використанням `encodeURI()` завжди визначайте, яку частину URL ви плануєте кодувати. Якщо кодуєте лише параметри запиту або інші компоненти URL, які можуть містити спеціальні символи, розгляньте використання `encodeURIComponent()` замість `encodeURI()` для більш точного кодування. Приклад: `const base = "https://example.com/query?"; const param = "name=John&age=20"; const encodedURL = base + encodeURIComponent(param);`
Порада:	Коли ви кодуєте URL за допомогою `encodeURI()`, завжди перевіряйте результат, щоб бути впевненим, що він відповідає вашим очікуванням. Іноді деякі символи можуть залишитися некодованими, що може призвести до проблем при обробці URL на сервері або в інших середовищах.
Порада:	Якщо ви розробляєте великі системи або фреймворки, розгляньте можливість створення загальних службових функцій для кодування URL, які б враховували особливості вашої системи та інші вимоги безпеки. Це може допомогти уникнути типових помилок при кодуванні і забезпечити консистентність у всьому проекті.

Синтаксис

encodeURI(uri)

Параметри

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

Return

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

Exception

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

Переглядачі

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

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

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

Приклади

В інтерфейсі користувач вводить текст для кодування у поле введення. Після натискання на кнопку "Кодувати", текст буде закодований за допомогою методу encodeURI() і результат буде відображений на сторінці.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/QWzZLRp">
  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 адресу, до якої потрібно додати рядок запиту. Користувач вводить рядок "Книги про JavaScript&author=Джон", але цей рядок містить символ "&", який є спеціальним символом в URL. Використовуючи метод encodeURI(), ми кодуємо цей рядок таким чином, щоб його можна було безпечно додати до URL.

// Базова 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"

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

// Заголовок новини, який користувач хоче поділитися
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Україні!"

JS довідник

JavaScript

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