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

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

Кодирование простых параметров:

console.log(encodeURIComponent('параметр&значение'));

параметр%26%D0%B7%D0%BD%D0%B0%D1%87%D0%B5%D0%BD%D0%B8%D0%B5

Кодирование сложной строки со специальными символами:

console.log(encodeURIComponent('Hello World!#$&+'));

Hello%20World!%23%24%26%2B

Функция корректно обрабатывает нестроковые аргументы:

console.log(encodeURIComponent(123));
console.log(encodeURIComponent(true));

123
true

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

encodeURI() - кодирует весь URI, но не трогает символы, являющиеся частью синтаксиса URI ( :, /, ?, #, &, =, ;, +, @, ,, $). Используется для кодирования полного URL.

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

Выбор функции зависит от задачи: encodeURIComponent для значений параметров, encodeURI для целых адресов. escape следует избегать.

Распространенные ошибки

Ошибка 1: Кодирование всего URL, а не только параметров.

// Неправильно
let url = encodeURIComponent('https://example.com/page?q=test');
console.log(url);

https%3A%2F%2Fexample.com%2Fpage%3Fq%3Dtest // Слэши и протокол закодированы, URL сломан

Ошибка 2: Двойное кодирование.

let param = 'тест';
let encodedOnce = encodeURIComponent(param); // %D1%82%D0%B5%D1%81%D1%82
let encodedTwice = encodeURIComponent(encodedOnce);
console.log(encodedTwice);

%25D1%2582%25D0%25B5%25D1%2581%25D1%2582 // Значение испорчено

Ошибка 3: Попытка закодировать null или undefined через переменную.

let value = null;
console.log(encodeURIComponent(value)); // Это сработает, вернет "null"
console.log(encodeURIComponent(window.undefinedValue)); // Вернет "undefined"

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

Спецификация функции encodeURIComponent остается стабильной в ECMAScript. Существенных изменений в поведении в последних версиях стандарта не было. Функция работает консистентно во всех современных браузерах и средах выполнения JavaScript.

Расширенные примеры использования

Пример 1: Подготовка параметров для POST-запроса в формате x-www-form-urlencoded.

let params = {
  name: 'Иван Иванов',
  email: 'ivan@example.com',
  message: 'Сообщение & спецсимволы: #, ?, ='
};

let queryString = Object.keys(params)
  .map(key => encodeURIComponent(key) + '=' + encodeURIComponent(params[key]))
  .join('&');

console.log(queryString);

name=%D0%98%D0%B2%D0%B0%D0%BD%20%D0%98%D0%B2%D0%B0%D0%BD%D0%BE%D0%B2&email=ivan%40example.com&message=%D0%A1%D0%BE%D0%BE%D0%B1%D1%89%D0%B5%D0%BD%D0%B8%D0%B5%20%26%20%D1%81%D0%BF%D0%B5%D1%86%D1%81%D0%B8%D0%BC%D0%B2%D0%BE%D0%BB%D1%8B%3A%20%23%2C%20%3F%2C%20%3D

Пример 2: Динамическое построение URL с несколькими параметрами.

function buildUrl(base, queryParams) {
  const query = Object.entries(queryParams)
    .map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`)
    .join('&');
  return query ? `${base}?${query}` : base;
}

const url = buildUrl('https://api.example.com/search', {
  q: 'JavaScript & TypeScript',
  limit: 20,
  sort: 'recent'
});
console.log(url);

https://api.example.com/search?q=JavaScript%20%26%20TypeScript&limit=20&sort=recent

Пример 3: Кодирование данных для использования в атрибуте data-* HTML элемента.

let userData = {
  id: 42,
  name: 'ООО "Рога и копыта"',
  settings: { theme: 'dark', lang: 'ru' }
};

let encodedData = encodeURIComponent(JSON.stringify(userData));
let html = `
`;
console.log(html);

Альтернативы в других языках

PHP: urlencode() - аналогична encodeURIComponent, но с отличием в кодировании пробела (как +). rawurlencode() кодирует пробел как %20.

echo urlencode('параметр&значение'); // параметр%26%D0%B7%D0%BD%D0%B0%D1%87%D0%B5%D0%BD%D0%B8%D0%B5

Python: urllib.parse.quote() - аналогична encodeURIComponent. Имеет параметр safe для указания незакодируемых символов.

from urllib.parse import quote
print(quote('параметр&значение')) # %D0%BF%D0%B0%D1%80%D0%B0%D0%BC%D0%B5%D1%82%D1%80%26%D0%B7%D0%BD%D0%B0%D1%87%D0%B5%D0%BD%D0%B8%D0%B5

C#: Uri.EscapeDataString() - похожа на encodeURIComponent.

Uri.EscapeDataString("параметр&значение");