JS метод Global.decodeURIComponent()

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

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

Та навіщо нам взагалі потрібно декодувати URI? У світі веб-розробки, де інформація постійно передається між серверами та клієнтами, безпека та читабельність даних мають вирішальне значення. Метод decodeURIComponent() дозволяє нам перетворити закодовані компоненти URI назад у їхній зрозумілий і читабельний формат.

Розглянемо практичний приклад. Припустимо, у нас є такий закодований URI: `"Hello%20World!". Використовуючи decodeURIComponent(), ми отримаємо рядок "Hello World!".

let encoded = "Hello%20World!";
let decoded = decodeURIComponent(encoded);
console.log(decoded);  // Виводить "Hello World!"

Тепер розглянемо, де та як можна використовувати decodeURIComponent(). Цей метод особливо корисний при розробці веб-застосунків, де дані часто передаються через URL-адресу в якості параметрів запиту. Наприклад, якщо користувач хоче передати текстову фразу "Моя книга" через URL, фраза повинна бути спершу закодована, а потім передана. При отриманні такої інформації з URL, розробнику потрібно буде використовувати decodeURIComponent() для того, щоб правильно обробити та відобразити цю інформацію.

Основні особливості decodeURIComponent() включають здатність обробляти всі символи, закодовані методом encodeURIComponent(). Це означає, що навіть якщо ваш рядок містить ряд спеціальних символів, таких як знаки долара, крапки, пробіли або будь-який інший спеціальний символ, вони будуть правильно декодовані.

Однак важливо відзначити, що decodeURIComponent() відрізняється від decodeURI(). Останній декодує URI, але не буде декодувати спеціальні символи, такі як :, /, ? та #, тоді як decodeURIComponent() декодує їх.

Нотатка:

Перш ніж використовувати decodeURIComponent() для декодування рядка, переконайтеся, що вхідний рядок дійсно був закодований за допомогою encodeURIComponent(). Намагаючись декодувати рядок, який не був правильно закодований, може призвести до винятку URIError.

try {
    let decoded = decodeURIComponent(potentiallyEncodedString);
} catch (e) {
    console.error("Рядок не було правильно закодовано: ", e);
}

Нотатка:

Для початківців може бути просто сплутати decodeURIComponent() з decodeURI(). Пам'ятайте, що decodeURIComponent() декодує спеціальні символи, такі як :, /, ? та #, тоді як decodeURI() їх не торкається. Завжди визначайте, який рівень декодування вам потрібен перед вибором конкретного методу.

Порада:

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

let params = "name=John%20Doe&age=30&city=New%20York";
let decodedParams = params.split("&").map(param => {
    let [key, value] = param.split("=");
    return `${key}=${decodeURIComponent(value)}`;
}).join("&");

Синтаксис

decodeURIComponent(encodedURI)

Параметри

*encodedURI: Цей параметр представляє частину URI, яка була закодована за допомогою методу encodeURIComponent() або аналогічної процедури кодування. Метод decodeURIComponent() буде намагатися перетворити цей закодований рядок назад у його вихідний, незакодований вигляд.

Return

string: Повертає новий рядок, який представляє декодовану версію заданого закодованого компоненту Уніфікованого Ідентифікатора Ресурсу (URI).

Exception

URIError: Виникає, коли encodedURI містить символ %, за яким не слідують дві шістнадцяткові цифри, або коли екранована послідовність не кодує дійсний символ UTF-8.

Переглядачі

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

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

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

Приклади

Коли користувач введе закодований URI компонент і натисне кнопку "Декодувати", він побачить розкодований результат в спеціальному розділі на сторінці.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/XWoxroE">
  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, який містить закодовані параметри запиту. Наприклад, ім'я "John Doe" було закодовано як "John%20Doe". Функція getDecodedParams приймає такий URL як вхід і використовує decodeURIComponent() для декодування значень параметрів. Потім вона повертає об'єкт з декодованими значеннями параметрів.

// Задано URL з параметрами запиту, які були закодовані
let encodedURL = "https://example.com/?name=John%20Doe&age=30";

// Функція для отримання та декодування параметрів з URL
function getDecodedParams(url) {
    let params = new URLSearchParams(url.split('?')[1]);
    let result = {};

    for (let [key, value] of params.entries()) {
        result[key] = decodeURIComponent(value);
    }

    return result;
}

let decodedParams = getDecodedParams(encodedURL);
console.log(decodedParams); // { name: "John Doe", age: "30" }

Метод decodeURIComponent() може викидати помилку, якщо намагатися декодувати рядок, який містить недійсне кодування. У цьому прикладі ми спробували декодувати рядок "This%20is%20a%20test%G", який містить неправильне кодування "%G". Коли ми спробували декодувати цей рядок, ми отримали помилку. Для обробки таких помилок ми використовуємо конструкцію try-catch, щоб вивести повідомлення про помилку і запобігти аварійному завершенню програми.

// Задано потенційно закодований рядок
let potentiallyEncodedString = "This%20is%20a%20test%G";

try {
    let decodedString = decodeURIComponent(potentiallyEncodedString);
    console.log(decodedString);
} catch (error) {
    console.error("Помилка при декодуванні рядка: ", error.message);
}

JS довідник

JavaScript

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