探索 js 中的三种编码方法

js 中有三个编码解码方法：

• escape() 和 unescape()
• encodeURI() 和 decodeURI()
• encodeURIComponent() 和 decodeURIComponent()

这几个方法在实际应用中很容易弄晕，本文介绍它们之间的区别。
实际应用中，当我们看到被编码后的 url 地址，知道用哪种解码方法可以得到原始 url，做到这一点也就够了。

escape()、unescape()

escape() 对 url 中除去 英文字母、/、. 的其它字符进行编码。

var result = escape('https://www.baidu.com?query=中国&page=10')
// "https%3A//www.baidu.com%3Fquery%3D%u4E2D%u56FD%26page%3D10"

上面编码中，字符 & 被编码成 %26，查 ASCII 表可见 & 的十六进制是 26，前面加上 % 组成 %26 作为最终结果。查 ASCII 表 可验证 =、? 等字符的编码结果。

ASCII 编码

上面代码中，汉字 中国 被编码成 %u4E2D%u56FD。中文汉字采用 Unicode 编码，点击 这里 可验证转换结果。

Unicode 编码转换

结论

• escape() 对整个 url 进行编码；
• 不对英文字母、斜线 / 进行编码；
• 对字符进行 ASCII 编码；
• 对汉字进行 Unicode 编码。

unescode() 为对应解码方法

var result = "https%3A//www.baidu.com%3Fquery%3D%u4E2D%u56FD%26page%3D10"
unescape(result)        // "https://www.baidu.com?query=中国&page=10"

encodeURI()、decodeURI()

encodeURI('https://www.baidu.com?name=dkvirus&age=18')
// "https://www.baidu.com?name=dkvirus&age=18"

如果你的 url 中不包含中文，encodeURI() 不会做编码，原样返回，见上面代码。

---我是分割线---

encodeURI('https://www.baidu.com?query=中国&page=10')
// "https://www.baidu.com?query=%E4%B8%AD%E5%9B%BD&page=10"

只有当 url 查询参数包含中文时，encodeURI() 才会做编码操作，上面代码中，汉字 中 被编码为 %E4%B8%AD，查下图可见与 UTF8 编码结果是一样的。点 这里 可验证转换结果。

UTF-8 编码转换

有的 中文-UTF8转换器 结果如下：

HTML 转义序列

上图可见汉字 中 被编码成 中，这种以 & 开头，以 ; 结尾，形如 &xxxxx; 的字符是 Html 转义序列，不是编码。

常见符号的 Html 转义序列如下：

常见符号的 HTML 转义序列

decodeURI() 为对应解码方法

var result = "https://www.baidu.com?query=%E4%B8%AD%E5%9B%BD&page=10"
decodeURI(result)    // "https://www.baidu.com?query=中国&page=10"

结论

• encodeURI() 如果 url 中不包含中文，不做编码操作，原样返回 url；
• encodeURI() 如果 url 中包含中文，仅对中文做 UTF-8 编码；
• decodeURI() 可将被 UTF-8 编码的字符解码为中文汉字。

encodeURIComponent()、decodeURIComponent()

encodeURIComponent('https://www.baidu.com?query=中国&page=10')
// "https%3A%2F%2Fwww.baidu.com%3Fquery%3D%E4%B8%AD%E5%9B%BD%26page%3D10"

• 上面代码，除英文字母外所有字符都被编码了；
• 字符 : 被编码为 %3A，字符 / 被编码为 %2F，编码规则为 ASCII 编码；
• 汉字 中 被编码为 %E4%B8%AD，编码规则为 UTF-8 编码。

decodeURIComponent() 为对应解码方法。

decodeURIComponent("https%3A%2F%2Fwww.baidu.com%3Fquery%3D%E4%B8%AD%E5%9B%BD%26page%3D10")
// "https://www.baidu.com?query=中国&page=10"