标题中两个方法功能比较类似,都可以对URI进行编码,并且返回值格式相同。
所以,实际编码中可能会出现方法应用场景不恰当的现象,从而导致一些错误的发生。
特别说明:两个方法的编码对象通常是网址,之前称网址为URL,当前统一称作为URI。
方法名字通常会体现各自的功能,注意这一点可能会有助于概念的理解与区分。
为了朋友们变省时省力,下面在通过代码实例简单介绍一下两个方法的异同。
   [ 其他 ] 运行代码    下载代码
<script>
let URI="www.softwhy.com?webName=51前端";
console.log(encodeURI(URI));
console.log(encodeURIComponent(URI));
</script>
一.方法的相同点:
(1).都是对URI进行编码,防止一些意外情况的发生。
(2).返回值的格式完全相同。
(3).都属于Global 全局对象。
可以看到两个方法对特殊字符的编码返回值的格式是相同的。
其实从上述编码结果也可以看出两个方法确实有差异,否则返回字符串就完全相同了。
   [ 其他 ] 运行代码    下载代码
<script>
let URI="http://www.softwhy.com?webName=51前端";
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失效。
于是,掌握两个方法的应用目标与编码字符的范围的差别就达到目的了。

代码描述:encodeURI Component。encodeURI与encodeURIComponent区别



179 238



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到