概述
前端经常需要对放入 url 中的参数进行编码和解码, JS 原生提供了两组编码和解码的函数, 分别为 encodeURIComponent 与 decodeURIComponet,encodeURI 与 decodeURI, 这两组函数有什么区别和不同的应用场景呢? 我自己经常会混淆, 最近又遇到这些问题, 因此自己去尝试了一些 demo, 并记录下来, 让自己彻底搞明白;
共同点
这两组函数都是 JS 的全局函数, encodeURI() 和 encodeURIComponent() 方法可以对 URI (Uniform ResourceIdentifiers, 通用资源标识符) 进行编码, 以便发送给浏览器. 有效的 URI 中不能包含某些字符, 例如空格,+,/ 等. 而这 URI 编码方法就可以对 URI 进行编码, 它们用特殊的 UTF-8 编码替换所有无效的字 符, 从而让浏览器能够接受和理解. 编码函数都不会对ASCII 码字母, 数字, 特定标点符号 [- _ . ! ~ * ' ( ) 等等] 进行编码, 对其保持原型.
对应的 decodeURI() 和 decodeURIComponent() 则是对编码的 URI 进行解码, 以得到原始的 URI.
不同点
encodeURI() 不会对在 URI 中具有特殊含义的 ASCII 标点符号 [如 , / ? : @ & 空格 = + $ # 等等] 进行编码, 还是保持原形; 但是会对 % 编码, 因为 % 比较特殊, 它是浏览器中十六进制表示关键字, 比如 + 对应 +, 如果你的原始 URI 中有 %,encodeURI 会对其进行转义.
函数 ecodeURIComponent(str) 会对这些符号进行编码, 编码成由一个或多个十六进制的转义序列表示.
ecodeURIComponent(str) 假定它的入参是 URI 的一部分 (比如协议, 主机名, 路径或查询字符串). 因此 encodeURIComponent() 函数将转义用于分隔 URI 各个部分的标点符号.
一般用法
如果需要编码整个 URL, 然后使用这个 URL, 用 encodeURI
当只需要编码 URL 中的参数时, 用 encodeURIComponent
示例
- demo1
- > var url = "http://www.baidu.com/list?p=a+b+c"
- > encodeURI(url)
- "http://www.baidu.com/list?p=a+b+c"
- > encodeURIComponet(url)
- "http://www.baidu.com/list?p=a+b+c"
可以看出 encodeURIComponet() 方法吧 url 中的 /,? 以及 + 都转义了, 而 encodeURI() 方法没有改变;
- demo2
- > var url = "% /$#;"
- > encodeURI(url)
- "%+/$#;"
- > encodeURIComponet(url)
- "%+/$#;"
% 也被 encodeURI 函数转义
参考
- https://www.cnblogs.com/gexiaoshan/p/4260588.html
- https://www.w3school.com.cn/js/jsref_encodeURIComponent.asp
来源: http://www.jianshu.com/p/f5e1e4b7354c