encodeURI与encodeURIComponent区别

好旺角 2019-11-18 178 阅读

标题中两个方法功能比较类似,都可以对URI进行编码,并且返回值格式相同。
所以,实际编码中可能会出现方法应用场景不恰当的现象,从而导致一些错误的发生。
特别说明:两个方法的编码对象通常是网址,之前称网址为URL,当前统一称作为URI。
方法名字通常会体现各自的功能,注意这一点可能会有助于概念的理解与区分。
为了朋友们变省时省力,下面在通过代码实例简单介绍一下两个方法的异同。

<script>
let URI="www.softwhy.com?webName=乐分享";
console.log(encodeURI(URI));
console.log(encodeURIComponent(URI));
</script>

一.方法的相同点:
(1).都是对URI进行编码,防止一些意外情况的发生。
(2).返回值的格式完全相同。
(3).都属于Global 全局对象。
可以看到两个方法对特殊字符的编码返回值的格式是相同的。
其实从上述编码结果也可以看出两个方法确实有差异,否则返回字符串就完全相同了。

<script>
let URI="http://www.softwhy.com?webName=乐分享";
console.log(encodeURI(URI));
console.log(encodeURIComponent(URI));
</script>

二.两个方法的不同:
(1).针对的目标不同:
先从方法的名称开始分析encodeURI由单词encode和URI(缩写看做一个单词)构成。
由于encodeURI方法是针对整个URI进行编码,所以URI中的一些语法关键字不能被编码,要保证整个URI依然是有效可用的,encodeURIComponent主要针对URL的传值部分进行编码,如果对整个URl进行编码,会导致整个URL失效。
(2).编码的字符不同:由于两个方法编码针对目标的不同,所以方法编码的字符范围也有所不同。
encodeURI方法不会编码如下字符:
(1).字母和数字([0-9a-zA-Z]匹配的字符)
(2).; , / ? : @ & = + $ - _ . ! ~ * ' ( ) #
encodeURIComponent方法不会编码如下字符:
(1).字母和数字([0-9a-zA-Z]匹配的字符)
(2).- _ . ! ~ * ' ( )
三.总结:
由于方法的目的不同,所以出现差异是必然的。
encodeURI既然针对整个URI编码,那么就要保证整个URI编码后依然有效。
encodeURIComponent因为针对传值,所以对整个URI编码就不正确的选择,因为可能导致URI失效。
于是,掌握两个方法的应用目标与编码字符的范围的差别就达到目的了。

最新游戏