Как закодировать текст для URL

Короткий ответ

encodeURIComponent() заменяет пробелы, амперсанды и другие спецсимволы кодами, чтобы они не ломали адрес:

const query = 'tea & coffee?';
 
console.log('/search?q=' + encodeURIComponent(query));

Результат:

/search?q=tea%20%26%20coffee%3F

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

decodeURIComponent() делает обратное:

console.log(decodeURIComponent('Caf%C3%A9%20%26%20bar'));

Результат:

Café & bar

encodeURI

encodeURI() кодирует адрес целиком и оставляет символы, которые в нём что-то значат, — /, ? и &:

console.log(encodeURI('https://example.com/my page?a=1&b=2'));
console.log(encodeURIComponent('https://example.com/my page?a=1&b=2'));

Результат:

https://example.com/my%20page?a=1&b=2
https%3A%2F%2Fexample.com%2Fmy%20page%3Fa%3D1%26b%3D2

Частая ошибка

Если вклеить значение в адрес без кодирования, часть данных потеряется: амперсанд читается как начало следующего параметра:

const name = 'Tom & Jerry';
const params = new URLSearchParams('q=' + name);
 
console.log(params.get('q'));

Результат:

Tom