概述
前端经常需要对放入url中的参数进行编码和解码,js原生提供了两组编码和解码的函数,分别为encodeURIComponent
与decodeURIComponet
,encodeURI
与decodeURI
,这两组函数有什么区别和不同的应用场景呢?我自己经常会混淆,最近又遇到这些问题,因此自己去尝试了一些demo,并记录下来,让自己彻底搞明白;
共同点
这两组函数都是js的全局函数,encodeURI()
和encodeURIComponent()
方法可以对URI (Uniform ResourceIdentifiers,通用资源标识符)进行编码,以便发送给浏览器。有效的URI中不能包含某些字符,例如空格、+
、/
等。而这URI编码方法就可以对URI进行编码,它们用特殊的UTF-8编码替换所有无效的字 符,从而让浏览器能够接受和理解。编码函数都不会对ASCII码字母、数字、特定标点符号【- _ . ! ~ * ' ( ) 等等】进行编码,对其保持原型。
对应的decodeURI()
和decodeURIComponent()
则是对编码的URI进行解码,以得到原始的URI。
不同点
encodeURI()
不会对在 URI 中具有特殊含义的 ASCII 标点符号【如 ,
/
?
:
@
&
空格 =
+
$
#
等等】进行编码,还是保持原形;但是会对%
编码,因为%
比较特殊,它是浏览器中十六进制表示关键字,比如+
对应%2B
,如果你的原始URI中有%
,encodeURI
会对其进行转义。
函数ecodeURIComponent(str)
会对这些符号进行编码,编码成由一个或多个十六进制的转义序列表示。
ecodeURIComponent(str)
假定它的入参是 URI 的一部分(比如协议、主机名、路径或查询字符串)。因此 encodeURIComponent() 函数将转义用于分隔 URI 各个部分的标点符号。
一般用法
如果需要编码整个URL,然后使用这个URL,用encodeURI
当只需要编码URL中的参数时,用encodeURIComponent
示例
demo1
> var url = "http://www.baidu.com/list?p=a+b+c"
> encodeURI(url)
"http://www.baidu.com/list?p=a+b+c"
> encodeURIComponet(url)
"http%3A%2F%2Fwww.baidu.com%2Flist%3Fp%3Da%2Bb%2Bc"
可以看出encodeURIComponet()
方法吧url
中的/
、?
以及+
都转义了,而encodeURI()
方法没有改变;
demo2
> var url = "%+/$#;"
> encodeURI(url)
"%25+/$#;"
> encodeURIComponet(url)
"%25%2B%2F%24%23%3B"
%
也被encodeURI
函数转义
参考
https://www.cnblogs.com/gexiaoshan/p/4260588.html
https://www.w3school.com.cn/js/jsref_encodeURIComponent.asp
网友评论