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

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

Кодирование полного URL

Код:

let url = 'https://example.com/тест?name=Андрей&age=25';
console.log(encodeURI(url));

Результат:

https://example.com/%D1%82%D0%B5%D1%81%D1%82?name=%D0%90%D0%BD%D0%B4%D1%80%D0%B5%D0%B9&age=25

Кодирование строки с пробелами и спецсимволами

Код:

let str = 'Hello World!@#$%^&*()';
console.log(encodeURI(str));

Результат:

Hello%20World!@#$%25%5E&*()

Попытка кодирования зарезервированных символов

Код:

let uri = '/path/to/resource?query=value#fragment';
console.log(encodeURI(uri));

Результат:

/path/to/resource?query=value#fragment

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

encodeURIComponent

Кодирует компонент URI, заменяя все символы, кроме буквенно-цифровых и - _ . ! ~ * ' ( ). Подходит для кодирования параметров запроса, так как кодирует больше символов, включая /, ? и #.

decodeURI / decodeURIComponent

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

escape (устаревшая)

Устаревшая функция, которая кодирует символы в шестнадцатеричном формате. Не рекомендуется для использования в новых проектах, так как не работает с символами Юникода корректно.

Предпочтительное использование:

• encodeURI - для кодирования всего URI, когда нужно сохранить его структуру.
• encodeURIComponent - для кодирования отдельных компонентов URI, таких как значения параметров запроса.

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

Двойное кодирование

Повторное применение функции к уже закодированной строке приводит к некорректному результату.

Код:

let str = 'тест';
let encoded = encodeURI(str);
console.log(encoded);
console.log(encodeURI(encoded));

Результат:

%D1%82%D0%B5%D1%81%D1%82
%25D1%2582%25D0%25B5%25D1%2581%25D1%2582

Использование для компонентов URL

При кодировании значений параметров запроса следует использовать encodeURIComponent.

Код:

let param = 'value=one&two';
let wrong = 'https://site.com?param=' + encodeURI(param);
let correct = 'https://site.com?param=' + encodeURIComponent(param);
console.log(wrong);
console.log(correct);

Результат:

https://site.com?param=value=one&two
https://site.com?param=value%3Done%26two

Обработка нестроковых значений

Функция преобразует аргумент в строку, что может привести к неожиданным результатам.

Код:

console.log(encodeURI(null));
console.log(encodeURI(undefined));
console.log(encodeURI({toString: () => 'test'}));

Результат:

null
undefined
test

Изменения в функции

Функция encodeURI была стандартизирована в ECMAScript 1-й редакции (1997 год) и с тех пор ее спецификация остается стабильной. Основные изменения касаются общего поведения JavaScript с символами Unicode.

В современных стандартах ECMAScript гарантируется, что функция корректно обрабатывает все символы из плоскости Базовой многоязыковой плоскости (BMP) и дополнительные символы (суррогатные пары) в соответствии с кодировкой UTF-8.

Некоторые устаревшие среды выполнения, такие как очень старые браузеры, могли иметь проблемы с обработкой символов за пределами ASCII, но в актуальных реализациях таких проблем нет.

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

Кодирование пути с кириллицей и пробелами

Код:

let path = '/каталог/файл с пробелом.txt';
console.log(encodeURI(path));
// Для сравнения encodeURIComponent
console.log(encodeURIComponent(path));

Результат:

/%D0%BA%D0%B0%D1%82%D0%B0%D0%BB%D0%BE%D0%B3/%D1%84%D0%B0%D0%B9%D0%BB%20%D1%81%20%D0%BF%D1%80%D0%BE%D0%B1%D0%B5%D0%BB%D0%BE%D0%BC.txt
%2F%D0%BA%D0%B0%D1%82%D0%B0%D0%BB%D0%BE%D0%B3%2F%D0%B4%D0%B0%D0%B9%D0%BB%20%D1%81%20%D0%BF%D1%80%D0%BE%D0%B1%D0%B5%D0%BB%D0%BE%D0%BC.txt

Создание URL с параметрами из объекта

Код:

function buildUrl(base, params) {
    let query = Object.keys(params)
        .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)
        .join('&');
    return encodeURI(base) + '?' + query;
}

let url = buildUrl('https://example.com/search', {
    q: 'кофе и чай',
    page: 1,
    sort: 'price_desc'
});
console.log(url);

Результат:

https://example.com/search?q=%D0%BA%D0%BE%D1%84%D0%B5%20%D0%B8%20%D1%87%D0%B0%D0%B9&page=1&sort=price_desc

Обработка URL с уже закодированными частями

Код:

let partial = 'file%20name.pdf';
let fullPath = '/docs/' + partial;
console.log(encodeURI(fullPath));
// Лучший подход - декодировать перед объединением
let decoded = decodeURIComponent(partial);
let correctPath = '/docs/' + decoded;
console.log(encodeURI(correctPath));

Результат:

/docs/file%2520name.pdf
/docs/file%20name.pdf

Использование с нестандартными схемами URI

Код:

let customUri = 'custom-scheme://host/папка/data#section1';
console.log(encodeURI(customUri));

Результат:

custom-scheme://host/%D0%BF%D0%B0%D0%BF%D0%BA%D0%B0/data#section1

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

Python: urllib.parse.quote

Код:

from urllib.parse import quote
url = 'https://example.com/тест?name=Андрей'
print(quote(url, safe=''))

Результат:

https%3A//example.com/%D1%82%D0%B5%D1%81%D1%82%3Fname%3D%D0%90%D0%BD%D0%B4%D1%80%D0%B5%D0%B9

Отличие: по умолчанию не кодирует символ /, требуется параметр safe для настройки.

PHP: urlencode / rawurlencode

Код:

$str = 'Hello World! тест';
echo urlencode($str);
echo '\n';
echo rawurlencode($str);

Результат:

Hello+World%21+%D1%82%D0%B5%D1%81%D1%82
Hello%20World%21%20%D1%82%D0%B5%D1%81%D1%82

rawurlencode ближе к encodeURIComponent, а urlencode заменяет пробелы на +.

MySQL: QUOTE

Функция QUOTE() предназначена для экранирования строк в SQL-запросах, а не для кодирования URI. Для работы с URI часто используют функции приложения или предварительную обработку.

C#: System.Uri.EscapeUriString / EscapeDataString

Аналоги encodeURI и encodeURIComponent соответственно, но с некоторыми отличиями в поведении с уже закодированными строками.