## 概述

`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-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 中 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 |

## 浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

- Desktop
- Mobile

特性 | 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)

## 相关链接

- `decodeURI`
- `encodeURI`
- `decodeURIComponent`