最近项目中遇到需要编码的一个问题,在encode和encodeURIComponent上绕了个小圈,所以打算总结一下js的编码问题,网上也有很多类似的文章,不过呢,总结出来的东西才是自己滴
为什么需要对URI进行编码?
对于Url来说,之所以要进行编码,是因为Url中有些字符会引起歧义。
一般来说,URL只能使用英文字母、阿拉伯数字和某些标点符号,不能使用其他文字和符号。这是因为网络标准RFC 1738做了硬性规定:
原文:"...Only alphanumerics [0-9a-zA-Z], the special characters "$-_.+!*‘()," [not including the quotes - ed], and reserved characters used for their reserved purposes may be used unencoded within a URL."
翻译:“只有字母和数字[0-9a-zA-Z]、一些特殊符号“$-_.+!*‘(),”[不包括双引号]、以及某些保留字,才可以不经过编码直接用于URL。”
但是该网络标准却没有规定说怎么进行编码,交给了浏览器来自己来控制,浏览器目前的一个通用做法是除了a-zA-Z0-9.-_以外,都进行%替换。
三种编码方式的介绍
Javascript中提供了3对函数用来对Url编码以得到合法的Url,它们分别是
escape 编码--》 unescape 解码
encodeURI 编码--》 decodeURI 解码
encodeURIComponent 编码--》 decodeURIComponent解码。
解码和编码的过程是可逆的,因此知道了编码过程就可以知道解码过程,所以只需要介绍编码过程即可
下面的表格列出了这三个函数的安全字符(即函数不会对这些字符进行编码)
什么是 ASCII 字符
在介绍那三个方法之前,先来了解一下ASCII字符。
维基百科:
ASCII(American Standard Code for Information Interchange,美国信息互换标准代码)是基于拉丁字母的一套电脑编码系统。它主要用于显示现代英语和其他西欧语言。它是现今最通用的单字节编码系统,并等同于国际标准ISO/IEC 646。
以下是部分ASCII码对照表:
escape---> unescape
该方法不会对 ASCII 字母和数字进行编码,也不会对下面这些 ASCII 标点符号进行编码: * @ - _ + . / 。其他所有的字符都会被转义序列替换。
这个方法属于过时产物,ECMAScript v3 反对使用该方法,应用使用 encodeURI() 和 encodeURIComponent() 替代它。所以这里不对escape进行过多的介绍。
也就是说,以后没啥事最好不要用escape来编码了,会出问题,之前的一个项目就遇到了一个坑。
encodeURI---> decodeURI
encodeURI 着眼于对整个URL进行编码,除了常见的符号以外,对其他一些在网址中有特殊含义的符号“; / ? : @ & = + $ , #”,不进行编码。编码后,它输出符号的utf-8形式,并且在每个字节前加上%。
也由于encodeURI不会编码“; / ? : @ & = + $ , #”等,因此它很适用于来编码完整的url,因为这些字符是用来分割主机和路径的。它对应的解码是decodeURI
encodeURIComponent--->decodeURIComponent
从上面提到的安全字符范围表格来看,我们会发现,encodeURIComponent编码的字符范围要比encodeURI的大。
它跟encodeURI的区别就是,encodeURI是对整个url进行编码,而encodeURIComponent是对url的个别部分进行编码。因此,像“; / ? : @ & = + $ , #” 这些也是会被编码的。
所以如果你要编码的是url的一部分,而不是整个url,用encodeURIComponent编码是不错的选择。平时的工作中,用encodeURIComponent的概率多一点
小结
发觉url的编码也没太多可聊的。最后做个小小的总结。
1、escape() 已被弃用,不多说,反正不要用就是了
2、encodeURI():编码整个url地址,对特殊符号,如 "; / ? : @ & = + $ , #",不进行编码,对应的解码函数是:decodeURI()。
3、encodeURIComponent() :能编码"; / ? : @ & = + $ , #"这些特殊字符。编码url中的部分组件,用的较多。对应的解码函数是decodeURIComponent()。
最后再来张表格: