MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

概述

encodeURIComponent()是对统一资源标识符(URI)的组成部分进行编码的方法。它使用一到四个转义序列来表示字符串中的每个字符的UTF-8编码(只有由两个Unicode代理区字符组成的字符才用四个转义字符编码)。

语法

encodeURIComponent(str);

参数

str
String. URI 的组成部分。

描述

encodeURIComponent 转义除了字母、数字、().!~*'-_之外的所有字符。

注意,如果试图编码一个非高-低位完整的代理字符,将会抛出一个 URIError 错误,例如:

// 高低位完整
alert(encodeURIComponent('\uD800\uDFFF'));

// 只有高位,将抛出"URIError: malformed URI sequence"
alert(encodeURIComponent('\uD800'));

// 只有低位,将抛出"URIError: malformed URI sequence"
alert(encodeURIComponent('\uDFFF')); 

为了避免服务器收到不可预知的请求,对任何用户输入的作为URI部分的内容你都需要用encodeURIComponent进行转义。比如,一个用户可能会输入"Thyme &time=again"作为comment变量的一部分。如果不使用encodeURIComponent对此内容进行转义,服务器得到的将是comment=Thyme%20&time=again。请注意,"&"符号和"="符号产生了一个新的键值对,所以服务器得到两个键值对(一个键值对是comment=Thyme,另一个则是time=again),而不是一个键值对。

对于 application/x-www-form-urlencoded (POST) 这种数据方式,空格需要被替换成 '+',所以通常使用 encodeURIComponent 的时候还会把 "%20" 替换为 "+"。

为了更严格的遵循 RFC 3986(它保留 !, ', (, ), 和 *),即使这些字符并没有正式划定 URI 的用途,下面这种方式是比较安全的:

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

示例

下面这个例子提供了 UTF-8 下 Content-DispositionLink 的服务器响应头信息的参数(例如 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 中 URI 编码必须的
            // 所以对于 |`^ 这3个字符我们可以稍稍提高一点可读性
            replace(/%(?:7C|60|5E)/g, unescape);
}

规范

规范 状态 备注
ECMAScript 3rd Edition (ECMA-262) Standard 初始定义
ECMAScript 5.1 (ECMA-262)
encodeURIComponent
Standard  
ECMAScript 2015 (6th Edition, ECMA-262)
encodeURIComponent
Standard  
ECMAScript Latest Draft (ECMA-262)
encodeURIComponent
Draft  

浏览器兼容性

特性 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基础功能 (Yes) (Yes) (Yes) (Yes) (Yes)
特性 Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基础功能 (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)

相关链接

文档标签和贡献者

 此页面的贡献者: maiff, HelloFun, PoppinL, Roland_Reed, fortime, SphinxKnight, AlexChao
 最后编辑者: maiff,