URL-кодирование в JavaScript — encodeURI, encodeURIComponent и лучшие практики

JavaScript предоставляет две встроенные функции для URL-кодирования:

encodeURIComponent()

Кодирует все символы, кроме: A-Z a-z 0-9 - _ . ! ~ * ' ( )

const name = 'John Doe'
const query = '?name=' + encodeURIComponent(name)
// ?name=John%20Doe

Используйте это для кодирования отдельных значений параметров запроса, сегментов пути или любых данных, которые становятся частью URL.

encodeURI()

Кодирует все символы, кроме вышеперечисленных, плюс зарезервированные символы URL: : / ? # [ ] @ ! $ & ' ( ) * + , ; =

const url = 'https://example.com/search?q=hello world'
const encoded = encodeURI(url)
// https://example.com/search?q=hello%20world

Используйте это при кодировании полной строки URL.

Распространённая ошибка

// НЕПРАВИЛЬНО — нарушает структуру URL
encodeURIComponent('https://example.com/page')
// https%3A%2F%2Fexample.com%2Fpage

// ПРАВИЛЬНО — сохраняет структуру
encodeURI('https://example.com/page')
// https://example.com/page

Протестируйте эти функции вживую с помощью нашего URL-кодировщика/декодировщика.