encodeURI与encodeURIComponent区别

标题中两个方法功能比较类似，都可以对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失效。
于是，掌握两个方法的应用目标与编码字符的范围的差别就达到目的了。