美文网首页程序员
前端中encodeURIComponent和encodeURI的

前端中encodeURIComponent和encodeURI的

作者: 程序猿随笔 | 来源:发表于2020-02-26 19:04 被阅读0次

概述

前端经常需要对放入url中的参数进行编码和解码,js原生提供了两组编码和解码的函数,分别为encodeURIComponentdecodeURIComponetencodeURIdecodeURI,这两组函数有什么区别和不同的应用场景呢?我自己经常会混淆,最近又遇到这些问题,因此自己去尝试了一些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

相关文章

网友评论

    本文标题:前端中encodeURIComponent和encodeURI的

    本文链接:https://www.haomeiwen.com/subject/rckichtx.html