探索 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"

推荐阅读更多精彩内容