encodeURIComponent()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. Itâs been available across browsers since иÑÐ»Ñ 2015 г..
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)
);
}
СпеÑиÑикаÑии
| Specification |
|---|
| ECMAScript® 2027 Language Specification> # sec-encodeuricomponent-uricomponent> |