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() декодує їх.

правити

Порада

Якщо у вас є 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("&");

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

Нотатка

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

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

Нотатка

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

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

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

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

Синтаксис

decodeURIComponent(encodedURI)

Параметри

encodedURI

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

автор: Bond

правити

Повернення

string

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

автор: Bond

правити

Винятки

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

Переглядачі

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

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

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

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

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

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

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

Приклади

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

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

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

// Задано 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" }