浅谈js中encodeURI和encodeURIComponent

最新推荐文章于 2025-02-28 15:04:45 发布

weixin_34417183

最新推荐文章于 2025-02-28 15:04:45 发布

阅读量650

点赞数

原文链接：https://juejin.im/post/5bd6d655e51d45396a369dd0

版权

文章首发于我的博客：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()

转载于:https://juejin.im/post/5bd6d655e51d45396a369dd0