MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

encodeURIComponent() - метод, кодирующий компонент универсального идентификатора ресурса (URI) заменой каждой определенной последовательности символов одной, двумя, тремя или четырьмя последовательностями символов, представленных в кодировке UTF-8  (будет только 4 управляющих последовательности для символов, состоящих из 2 "суррогатных" символов).

Синтаксис

encodeURIComponent(str);

Параметры

str
Строка. Компонент URI.

Описание

encodeURIComponent изменяет все символы, за исключением следующих: латинские буквы, десятичные цифры, - _ . ! ~ * ' ( )

Замечание: URIError будет брошена, если попытаться закодировать суррогат, который не является частью высоко-низкой пары, например:

// низко-высокая пара - нормально
console.log(encodeURIComponent('\uD800\uDFFF'));

// один высокий суррогат бросит "URIError: malformed URI sequence"
console.log(encodeURIComponent('\uD800'));

// один низкий суррогат бросит "URIError: malformed URI sequence"
console.log(encodeURIComponent('\uDFFF')); 

Чтоб избежать неожиданных запросов к серверу, вам следует вызывать encodeURIComponent для любых вводимых пользователем параметров, используемых как часть URI. Например, он мог написать "Thyme &time=again" для переменной comment. Неиспользование encodeURIComponent для неё даст comment=Thyme%20&time=again. Заметьте, что амперсанд и знак равно выделяют новую пару ключ-значение. Так что вместо комментария "Thyme &time=again", вы получите два POST параметра, один -  "Thyme ", а другой (time) равный "again".

Для application/x-www-form-urlencoded пробелы должны быть заменены на "+", поэтому вам может понадобиться encodeURIComponent с дополнительной заменой "%20" на "+".

Чтобы строго соблюдать RFC 3986 (который резервирует !, ', (, ), и *), даже не смотря на то, что символы не используют сформированных URI разделителей, следующее может безопасно использоваться:

function fixedEncodeURIComponent (str) {
  return encodeURIComponent(str).replace(/[!'()*]/g, function(c) {
    return '%' + c.charCodeAt(0).toString(16);
  });
}

Примеры

Пример представляет специальное кодирование, требуемое для заголовков сервера в UTF-8: Content-Disposition и Link (к примеру, имена файлов в UTF-8):

var fileName = 'my file(2).txt';
var header = "Content-Disposition: attachment; filename*=UTF-8''" 
             + encodeRFC5987ValueChars(fileName);

console.log(header); 
// логирует "Content-Disposition: attachment; filename*=UTF-8''my%20file%282%29.txt"


function encodeRFC5987ValueChars (str) {
    return encodeURIComponent(str).
        // Замечание: хотя RFC3986 резервирует "!", RFC5987 это не делает, так что нам не нужно избегать этого
        replace(/['()]/g, escape). // i.e., %27 %28 %29
        replace(/\*/g, '%2A').
            // Следующее не требуется для кодирования процентов для RFC5987, так что мы можем разрешить немного больше читаемости через провод: |`^
            replace(/%(?:7C|60|5E)/g, unescape);
}

Спецификации

Спецификация Статус Комментарий
ECMAScript 3rd Edition (ECMA-262) Стандарт Initial definition.
ECMAScript 5.1 (ECMA-262)
Определение 'encodeURIComponent' в этой спецификации.
Стандарт  
ECMAScript 2015 (6th Edition, ECMA-262)
Определение 'encodeURIComponent' в этой спецификации.
Стандарт  

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

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Да) (Да) (Да) (Да) (Да)
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Да) (Да) (Да) (Да) (Да) (Да)

Смотрите также

Метки документа и участники

 Внесли вклад в эту страницу: SlavaJan, alx-khramov, redveronika, BychekRU
 Обновлялась последний раз: SlavaJan,