文章首发于我的博客:lanjianguo.github.io/blog/
在项目中经常会遇到URL转码解码的情况,但是一直对于encodeURI和encodeURIComponent两种编码方式没有太多了解。用的时候也稀里糊涂,今天就针对这两种编码方式来对比分析一下二者的区别。
encodeURI编码范围
encodeURI()不编码字符有82个:! # $ & ' ( ) * + , - . / : ; = ? @ _ ~ 0-9 a-z A-Z
encodeURIComponent编码范围
encodeURIComponent不编码字符有71个:! ' ( ) * - . _ ~ 0-9 a-z A-Z
所以encodeURIComponent比encodeURI编码的范围更大。
举个栗子
虽然上面写了二者的编码范围的区别,但是还是不够直观,我们通过下面这里例子来看一下。
将下面的URL分别用两种编码方式,编码后打印输出。
var url = "https://lanjianguo.github.io/blog/2018/10/29/浅谈js中encodeURI和encodeURIComponent/"
console.log(encodeURI(url));
console.log(encodeURIComponent(url));
复制代码
encodeURI编码结果
http://lanjianguo.github.io/blog/2018/10/29/%E6%B5%85%E8%B0%88js%E4%B8%ADencodeURI%E5%92%8CencodeURIComponent/
复制代码
encodeURIComponent编码结果
https%3A%2F%2Flanjianguo.github.io%2Fblog%2F2018%2F10%2F29%2F%E6%B5%85%E8%B0%88js%E4%B8%ADencodeURI%E5%92%8CencodeURIComponent%2F
复制代码
通过上面两种编码,我们可以看到encodeURIComponent的编码将"/"符号也已经转码了,而encodeURI虽然被编码了,但是只是对中文字符做了编码,编码后的地址在浏览器里可以直接打开。而encodeURIComponent编码的地址在浏览器里不能被直接访问。
应用场景
看了两种编码的结果的不同,那这两种编码的应用应该是在哪些场景呢? 如果我们要编码的url没有参数存在,可以使用encodeURI进行编码,如果url中有参数存在,那么encodeURIComponent是最好方法。
解码
通过上面两种编码方式可以对url进行编码,在使用的时候,我们要将编码后的地址再进行解码即可。
encodeURI()的解码方法是decodeURI()
encodeURIComponent()的解码方法是decodeURIComponent()