DecodeURIComponent: примеры (JAVASCRIPT)

decodeURIComponent в JavaScript: принципы работы и практическое применение
Раздел: Строки, Кодирование URL
decodeURIComponent(encodedURIComponent: String): String

Описание функции decodeURIComponent

Функция decodeURIComponent() в JavaScript используется для декодирования компонента Uniform Resource Identifier (URI), который был ранее закодирован с помощью функции encodeURIComponent или аналогичного метода. Она преобразует escape-последовательности в их оригинальные символы. Эта функция применяется при работе с данными, переданными через URL, особенно когда они содержат специальные символы.

Функция принимает один обязательный аргумент: encodedURI — строка, представляющая закодированный компонент URI. Если аргумент не является строкой, он будет преобразован в строку.

Возвращаемое значение — новая строка, представляющая декодированный компонент URI. Если в закодированной строке содержатся некорректные escape-последовательности, функция выбрасывает исключение URIError.

Примеры использования decodeURIComponent

Декодирование простой строки:

const encoded = 'Hello%20World%21%20%C2%A9'; console.log(decodeURIComponent(encoded));
Hello World! ©

Декодирование параметров URL:

const urlParam = 'search%3DJavaScript%26page%3D1'; console.log(decodeURIComponent(urlParam));
search=JavaScript&page=1

Обработка кириллических символов:

const encodedRu = '%D0%9F%D1%80%D0%B8%D0%B2%D0%B5%D1%82'; console.log(decodeURIComponent(encodedRu));
Привет

Похожие функции в JavaScript

decodeURI() — декодирует целиковый URI, но не обрабатывает отдельные компоненты, такие как символы #, ?, &, =, которые могут быть частью строки запроса. Используется для декодирования полного URI, сгенерированного функцией encodeURI.

unescape() — устаревшая функция, которая декодирует строку, закодированную с помощью escape. Не рекомендуется для использования в новых проектах, так как не поддерживает UTF-8.

Предпочтительнее использовать decodeURIComponent для декодирования отдельных компонентов URI (например, параметров запроса), а decodeURI — для декодирования всего URI, чтобы сохранить его структуру.

Типичные ошибки

Использование decodeURIComponent для декодирования полного URL может привести к ошибкам, если в URI содержатся незакодированные специальные символы.

try { decodeURIComponent('http://example.com/?query=test&sort=asc'); } catch(e) { console.log(e.toString()); }
URIError: URI malformed

Попытка декодирования строки с некорректными escape-последовательностями вызывает исключение.

try { decodeURIComponent('%FF'); } catch(e) { console.log(e.toString()); }
URIError: URI malformed

Использование функции для строк, не закодированных с помощью encodeURIComponent, может дать неожиданные результаты.

console.log(decodeURIComponent('% is not encoded'));
URIError: URI malformed

Изменения в последних версиях

Спецификация ECMAScript не вносила существенных изменений в поведение decodeURIComponent. Однако, с развитием стандартов, улучшена обработка символов Unicode и суррогатных пар. В современных браузерах и средах выполнения функция корректно декодирует последовательности UTF-8, включая emoji и символы за пределами базовой многоязыковой плоскости.

Расширенные примеры

Декодирование сложных параметров с несколькими escape-последовательностями:

Пример javascript
const complex = '%7B%22name%22%3A%22John%20Doe%22%2C%22age%22%3A30%7D'; console.log(decodeURIComponent(complex));
{"name":"John Doe","age":30}

Обработка строк с закодированными символами разных языков:

Пример javascript
const multiLang = '%E3%81%93%E3%82%93%E3%81%AB%E3%81%A1%E3%81%AF%2C%20%D0%97%D0%B4%D1%80%D0%B0%D0%B2%D1%81%D1%82%D0%B2%D1%83%D0%B9%D1%82%D0%B5'; console.log(decodeURIComponent(multiLang));
こんにちは, Здравствуйте

Использование в цепочке с encodeURIComponent для безопасной передачи данных:

Пример javascript
const original = 'Data with & and = signs'; const encoded = encodeURIComponent(original); const decoded = decodeURIComponent(encoded); console.log(`Encoded: ${encoded}\nDecoded: ${decoded}`);
Encoded: Data%20with%20%26%20and%20%3D%20signs Decoded: Data with & and = signs

Декодирование компонентов пути URL:

Пример javascript
const path = '%2Fusers%2Fprofile%2Fsettings'; console.log(decodeURIComponent(path));
/users/profile/settings

Аналоги в других языках программирования

PHP: функция urldecode() выполняет аналогичную задачу.

echo urldecode('Hello%20World%21');
Hello World!

Python: модуль urllib.parse содержит функцию unquote().

from urllib.parse import unquote print(unquote('Hello%20World%21'))
Hello World!

C#: метод Uri.UnescapeDataString() в пространстве имен System.

Console.WriteLine(Uri.UnescapeDataString("Hello%20World%21"));
Hello World!

Основное отличие — в обработке ошибок: в JavaScript при неверных последовательностях генерируется исключение, тогда как в других языках может возвращаться исходная строка или применяться иная логика.

JS decodeURIComponent function comments

En
DecodeURIComponent Decodes a Uniform Resource Identifier (URI) component created by encodeURIComponent