JavaScript метод encodeURIComponent()

Определение и применение

JavaScript метод encodeURIComponent() кодирует компонент URI (англ. Uniform Resource Identifier – унифицированный идентификатор ресурса) заменяя каждый экземпляр определенных символов одной, двумя, тремя или четырьмя управ­ляю­щих по­сле­до­ва­тель­но­стей, представляющими кодировку символа UTF-8. Для того, чтобы декодировать URI, ранее созданный функцией encodeURIComponent() вы можете воспользоваться методом decodeURIComponent().

Обращаю Ваше внимание на то, что метод encodeURIComponent() отличается от метода encodeURI(). Метод encodeURIComponent() предполагает, что его параметр является не весь URI, а лишь фрагмент URI (такой как протокол, имя хоста, путь или строка запроса). По этой причине он преобразует все символы за исключением следующих:

A-Z a-z 0-9 - _ . ! ~ * ' ( )

Остальные символы (кроме вышеуказанных) заменяются путем преобразования символа в его код UTF-8 и последующего кодирования каждого из полученных байтов шестнадцатеричной управляющей последовательностью в формате %xx. При этом ASCII-символы заменяются одной последовательностью %xx, с кодами от \u0080 до \u07ff двумя управляющими последовательностями, а все остальные 16-разрядные символы Юникода тремя управляющими последовательностями.

Метод encodeURI() не кодирует зарезервированные символы, имеющие особое значение в URI, а именно:

A-Z a-z 0-9 ; , / ? : @ & = + $ - _ . ! ~ * ' ( ) #

Если компоненты URI могут содержать такие символы как ? и # (например, строка запроса), то в этом случае необходимо кодировать каждый компонент отдельно с помощью функции encodeURIComponent().

Отличие работы методов encodeURIComponent() и encodeURI() вы можете увидеть в примере ниже.

Поддержка браузерами

Метод	Chrome	Firefox	Opera	Safari	IExplorer	Edge
encodeURIComponent()	Да	Да	Да	Да	Да	Да

JavaScript синтаксис:

encodeURIComponent(str); 

str - String

Версия JavaScript

Значения параметров

Исключения

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

Базовое использование

const uri = "https://basicweb.ru/file.php?login=hello&pass=world"; 
const uri_enc = encodeURIComponent(uri);
const uri_dec = decodeURIComponent(uri_enc);

console.log(uri_enc); // "https%3A%2F%2Fbasicweb.ry%2Ffile.php%3Flogin%3Dhello%26pass%3Dworld"
console.log(uri_dec); // "https://basicweb.ru/file.php?login=hello&pass=world"

Отличие работы методов encodeURIComponent() и encodeURI()

const str1 = ";,/?:@&=+$";        		// Reserved Characters
const str2 = "-_.!~*'()";         		// Unescaped Characters
const str3 = "#";                 			// Number Sign
const str4 = "AZZZ zasdsd 19999";  // Alphanumeric Characters + Space

console.log(encodeURI(str1));                       // ;,/?:@&=+$
console.log(encodeURIComponent(str1));  // %3B%2C%2F%3F%3A%40%26%3D%2B%24

console.log(encodeURI(str2));          			// -_.!~*'()
console.log(encodeURIComponent(str2));      // -_.!~*'()

console.log(encodeURI(str3));         		   // #
console.log(encodeURIComponent(str3)); // %23

console.log(encodeURI(str4));          		   // AZZZ%20zasdsd%2019999
console.log(encodeURIComponent(str4)); // AZZZ%20zasdsd%2019999