Encode URL в JavaScript: 3 способа, которые спасут ваш сайт

Онлайн-тренажер Python для начинающих

Изучайте Python легко и без перегрузки теорией. Решайте практические задачи с автоматической проверкой, получайте подсказки на русском языке и пишите код прямо в браузере — без необходимости что-либо устанавливать.

Начать курс

Вступление: Почему URL-кодирование — это не скучная теория, а спасение вашего приложения

Представьте ситуацию: вы пишете веб-приложение на JavaScript, пользователь вводит поисковый запрос «JavaScript & Node.js: лучшие практики». Вы передаёте этот текст в URL как параметр GET-запроса. Открываете консоль браузера — а там ошибка. Или, что ещё хуже, — запрос уходит, но сервер его не понимает, и вместо результатов поиска пользователь видит пустую страницу.

Знакомо? Если да — эта статья для вас. Если нет — она всё равно для вас, потому что рано или поздно вы с этим столкнётесь. Тема кодирования URL в JavaScript — один из самых популярных вопросов на Stack Overflow (десятки тысяч просмотров), и неспроста. Это та мелочь, которая отличает профессионального разработчика от новичка.

Сегодня мы разберём три способа кодирования URL в JavaScript, научимся выбирать правильный инструмент для каждой задачи и рассмотрим реальные примеры из жизни веб-разработчика. Поехали!

Что такое URL-кодирование и зачем оно нужно

Прежде чем писать код, давайте разберёмся с теорией. URL (Uniform Resource Locator) имеет строгую структуру. В нём разрешены только определённые символы: латинские буквы, цифры и некоторые спецсимволы (-, _, ., ~). А вот пробелы, кириллица, символы &, ?, # и другие — под запретом.

Когда мы пытаемся передать такие символы в URL, браузер или сервер могут неправильно интерпретировать запрос. Например, символ & в строке запроса отделяет параметры друг от друга. Если он попадёт внутрь значения параметра — логика сломается.

Решение — URL-кодирование (процентное кодирование). Запрещённые символы заменяются на последовательность вида %XX, где XX — шестнадцатеричный код символа в кодировке UTF-8. Например, пробел становится %20, а кириллическая «а» — %D0%B0.

В JavaScript для этого есть три встроенных механизма. Давайте разберём каждый.

Способ 1: `encodeURI()` — для целых URL

Функция encodeURI() предназначена для кодирования полного URL. Она заменяет все символы, кроме тех, что являются частью синтаксиса URI: :, /, ?, #, &, = и других.

Синтаксис

encodeURI(uri)

Пример

const url = "https://pythonlib.ru/search?q=JavaScript & Node.js";
const encoded = encodeURI(url);
console.log(encoded);
// Результат: "https://pythonlib.ru/search?q=JavaScript%20&%20Node.js"

Обратите внимание: encodeURI() закодировала пробелы, но не тронула символы &, ? и =. Это правильно для целого URL, но опасно для параметров. Если бы в нашем запросе был символ & внутри значения параметра, он бы остался как есть и разорвал бы строку запроса.

Когда использовать

Когда нужно закодировать весь URL целиком (например, для передачи в window.location)
Когда URL не содержит пользовательских данных с потенциально опасными символами

Когда НЕ использовать

Для кодирования отдельных параметров запроса
Если в URL есть пользовательский ввод (формы, поиск, комментарии)

Способ 2: `encodeURIComponent()` — для параметров и значений

Это ваш главный инструмент на каждый день. encodeURIComponent() кодирует все символы, кроме букв, цифр и -, _, ., ~. Она закодирует даже те символы, которые являются частью синтаксиса URI — &, ?, =, # и так далее.

Синтаксис

encodeURIComponent(str)

Пример

const query = "JavaScript & Node.js: лучшие практики";
const encodedQuery = encodeURIComponent(query);
console.log(encodedQuery);
// Результат: "JavaScript%20%26%20Node.js%3A%20%D0%BB%D1%83%D1%87%D1%88%D0%B8%D0%B5%20%D0%BF%D1%80%D0%B0%D0%BA%D1%82%D0%B8%D0%BA%D0%B8"

// Теперь можно безопасно собрать URL
const baseUrl = "https://pythonlib.ru/search";
const fullUrl = `${baseUrl}?q=${encodedQuery}`;
console.log(fullUrl);
// Результат: "https://pythonlib.ru/search?q=JavaScript%20%26%20Node.js%3A%20%D0%BB%D1%83%D1%87%D1%88%D0%B8%D0%B5%20%D0%BF%D1%80%D0%B0%D0%BA%D1%82%D0%B8%D0%BA%D0%B8"

Видите, как символ & превратился в %26? Это значит, что сервер получит его как часть значения параметра, а не как разделитель.

Практический пример: сборка URL из объекта

Часто на практике нужно собрать URL с несколькими параметрами. Вот элегантный способ:

function buildUrl(baseUrl, params) {
  const queryString = Object.entries(params)
    .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
    .join('&');
  return `${baseUrl}?${queryString}`;
}

// Использование
const params = {
  q: "JavaScript & Node.js",
  page: 1,
  lang: "ru"
};

const url = buildUrl("https://api.pythonlib.ru/search", params);
console.log(url);
// Результат: "https://api.pythonlib.ru/search?q=JavaScript%20%26%20Node.js&page=1&lang=ru"

Когда использовать

Для кодирования значений параметров запроса (query string)
Для кодирования фрагментов URL (hash)
Для кодирования данных, отправляемых через application/x-www-form-urlencoded
Всегда, когда есть пользовательский ввод

Способ 3: Ручное кодирование (старый добрый `escape()` и кастомные решения)

Раньше в JavaScript была функция escape(), которая тоже кодировала строки. Но она устарела и не рекомендуется к использованию. Почему? Потому что она не поддерживает UTF-8 и работает только с ASCII. Для латиницы разницы нет, но кириллица и другие символы Unicode будут закодированы неправильно.