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 може зробити його непридатним для використання. Приклад:
|
Порада: | Перед використанням Приклад:
|
Порада: | Коли ви кодуєте 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()
і результат буде відображений на сторінці.
У даному прикладі ми маємо базову 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Україні!"