Чем отличаются `encodeURI` и `encodeURIComponent` в JavaScript?

Смысл

Обе функции кодируют небезопасные символы для URL (пробелы, кириллицу, спецсимволы) в percent-encoding (%XX).

Разница в том, какие символы они считают «структурой URL» и оставляют как есть.

encodeURI

Рассчитана на целиком URI (адрес целиком). Не трогает служебные разделители URL:

: / ? # [ ] @ ! $ & ' ( ) * + , ; =

encodeURI("https://example.com/поиск?q=кот и пёс");
// https://example.com/%D0%BF%D0%BE%D0%B8%D1%81%D0%BA?q=%D0%BA%D0%BE%D1%82%20%D0%B8%20%D0%BF%D1%91%D1%81
// схема, :, /, ? сохранены

encodeURIComponent

Рассчитана на отдельный кусок (параметр, сегмент пути). Кодирует почти всё, включая &, =, ?, /.

const q = encodeURIComponent("кот & пёс");
const url = `https://example.com/search?q=${q}`;
// q=%D0%BA%D0%BE%D1%82%20%26%20%D0%BF%D1%91%D1%81

Если сюда передать целый URL через encodeURIComponent, «сломаете» :// и ? — они тоже заэскейпятся.

Практика

const params = new URLSearchParams({ q: "кот & пёс" });
params.toString(); // q=%D0%BA%D0%BE%D1%82+%26+%D0%BF%D1%91%D1%81

Как думает сеньор

1. Для значений параметров — почти всегда encodeURIComponent или URLSearchParams.
2. encodeURI легко применить не туда и получить дырявый или перекодированный URL.
3. Декодирование — пара decodeURI / decodeURIComponent (симметрично).

Итог: encodeURI бережёт синтаксис целого URL; encodeURIComponent безопасно кодирует один компонент. На практике для query-параметров берите второй (или URLSearchParams).