深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例

简介: JavaScript中有三个可以对字符串编码的函数,分别是: escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,decodeURIComponent 。

JavaScript中有三个可以对字符串编码的函数,分别是: escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,decodeURIComponent 。

下面简单介绍一下它们的区别

1 escape()函数

定义和用法 
escape() 函数可对字符串进行编码,这样就可以在所有的计算机上读取该字符串。

语法 
escape(string)

参数  描述  
string  必需。要被转义或编码的字符串。 

返回值 
已编码的 string 的副本。其中某些字符被替换成了十六进制的转义序列。

说明 
该方法不会对 ASCII 字母和数字进行编码,也不会对下面这些 ASCII 标点符号进行编码: - _ . ! ~ * ' ( ) 。其他所有的字符都会被转义序列替换。

 

2 encodeURI()函数 
定义和用法 

encodeURI() 函数可把字符串作为 URI 进行编码。

语法 
encodeURI(URIstring)

参数  描述  
URIstring  必需。一个字符串,含有 URI 或其他要编码的文本。 

返回值 
URIstring 的副本,其中的某些字符将被十六进制的转义序列进行替换。

说明 
该方法不会对 ASCII 字母和数字进行编码,也不会对这些 ASCII 标点符号进行编码: - _ . ! ~ * ' ( ) 。

该方法的目的是对 URI 进行完整的编码,因此对以下在 URI 中具有特殊含义的 ASCII 标点符号,encodeURI() 函数是不会进行转义的:;/?:@&=+$,#


3 encodeURIComponent() 函数

定义和用法 
encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。

语法 
encodeURIComponent(URIstring)

参数  描述  
URIstring  必需。一个字符串,含有 URI 组件或其他要编码的文本。 

返回值 
URIstring 的副本,其中的某些字符将被十六进制的转义序列进行替换。

说明 
该方法不会对 ASCII 字母和数字进行编码,也不会对这些 ASCII 标点符号进行编码: - _ . ! ~ * ' ( ) 。

其他字符(比如 :;/?:@&=+$,# 这些用于分隔 URI 组件的标点符号),都是由一个或多个十六进制的转义序列替换的。

提示和注释 
提示:请注意 encodeURIComponent() 函数 与 encodeURI() 函数的区别之处,前者假定它的参数是 URI 的一部分(比如协议、主机名、路径或查询字符串)。因此 encodeURIComponent() 函数将转义用于分隔 URI 各个部分的标点符号。

 

4 分析

 通过对三个函数的分析,我们可以知道:escape()除了 ASCII 字母、数字和特定的符号外,对传进来的字符串全部进行转义编码,因此如果想对URL编码,最好不要使用此方法。而encodeURI() 用于编码整个URI,因为URI中的合法字符都不会被编码转换。encodeURIComponent方法在编码单个URIComponent(指请求参 数)应当是最常用的,它可以将参数中的中文、特殊字符进行转义,而不会影响整个URL。

 

5 示例:

1 escape()

<script type="text/javascript">

document.write(escape("http://www.w3school.com.cn/") + "<br />")

document.write(escape("?!=()#%&"))

</script>输出:

http%3A//www.w3school.com.cn

%3F%21%3D%28%29%23%25%26



2 encodeURI()

<script type="text/javascript">

document.write(encodeURI("http://www.w3school.com.cn/")+ "<br />")

document.write(encodeURI("http://www.w3school.com.cn/My first/"))

document.write(encodeURI(",/?:@&=+$#"))

</script>输出:

http://www.w3school.com.cn/

http://www.w3school.com.cn/My%20first/

,/?:@&=+$#

对整个URL进行编码,而URL的特定标识符不会被转码。

 

3 encodeURIComponent()

例1:

<script type="text/javascript">

document.write(encodeURIComponent("http://www.w3school.com.cn/"))

document.write("<br />")

document.write(encodeURIComponent("http://www.w3school.com.cn/p 1/"))

document.write("<br />")

document.write(encodeURIComponent(",/?:@&=+$#"))

</script输出:

http%3A%2F%2Fwww.w3school.com.cn 
http%3A%2F%2Fwww.w3school.com.cn%2Fp%201%2F 
%2C%2F%3F%3A%40%26%3D%2B%24%23
例2:<script language="javascript">document.write('

<a href="http://passport.baidu.com/?logout&aid=7&u='+encodeURIComponent("http://cang.baidu.com/bruce42")+'">退出</a>');</script>

对URL中的参数进行编码,因为参数也是一个URL,如果不编码会影响整个URL的跳转。

 

 

总结

escape()不能直接用于URL编码,它的真正作用是返回一个字符的Unicode编码值。比如"春节"的返回结果是%u6625%u8282,,escape()不对"+"编码
主要用于汉字编码,现在已经不提倡使用。

encodeURI()是Javascript中真正用来对URL编码的函数。
编码整个url地址,但对特殊含义的符号"; / ? : @ & = + $ , #",也不进行编码。对应的解码函数是:decodeURI()。

encodeURIComponent()
能编码"; / ? : @ & = + $ , #"这些特殊字符。对应的解码函数是decodeURIComponent()。

我想要传递带&符号的网址,所以用encodeURIComponent()

<script>
document.write(encodeURIComponent("http://www.ilcng.com/?id1=1&id2=2"));
</script>
输出结果是:http%3A%2F%2Fwww.ilcng.com%2F%3Fid1%3D1%26id2%3D2

总结一下主要是:

1.encodeURI()是Javascript中真正用来对URL编码的函数。

2.解码函数是decodeURI()

3.最后一个Javascript编码函数是encodeURIComponent()。与encodeURI()的区别是,它用于对URL的组成部分进行个别编码,而不用于对整个URL进行编码。

 

相关文章
|
NoSQL 算法 安全
Redlock 算法-主从redis分布式锁主节点宕机锁丢失的问题
Redlock 算法-主从redis分布式锁主节点宕机锁丢失的问题
664 0
|
供应链 Python
|
网络安全 数据安全/隐私保护 网络虚拟化
刷完OpenWrt在浏览器无法访问的解决办法
其实问题很明显、 是因为刷了trunk版固件、 并没有集成luci、 那接下来就是装luci、但是装luci需要联网(不过其实不联网其实也是可以安装的、) 我说的联网是让路有联网、而不是网线接路由,路由接电脑、然后电脑拨号上网、这种联网、 如何让路由联网呢? 1、最简单的方法、如果你有两个路由、或者...
13078 0
|
缓存
npm install 一直卡着不动如何解决
npm install 一直卡着不动如何解决
7448 0
|
机器学习/深度学习 人工智能 Cloud Native
大语言模型推理提速,TensorRT-LLM 高性能推理实践
大型语言模型(Large language models,LLM)是基于大量数据进行预训练的超大型深度学习模型,本文主要讲述TensorRT-LLM利用量化、In-Flight Batching、Attention、Graph Rewriting提升 LLM 模型推理效率。
102518 2
|
数据采集 XML 运维
什么是主数据管理?企业主数据管理方法论
主数据又被称为黄金数据,其价值高也非常重要。对企业来说,主数据的重要性如何强调都不为过,主数据治理是企业数据治理中最为重要的一环。主数据管理的内容包括 主数据管理标准、主数据应用标准 和 主数据集成服务标准 三大类。
|
监控 安全 算法
云上智能风控:构建金融安全的智能防线
云上智能风控系统具有良好的灵活性和可扩展性。随着金融市场的不断变化和技术的不断发展,系统能够灵活调整风控策略和算法模型以适应新的风险类型和场景。同时,系统还能够根据业务需求进行功能扩展和升级以满足不同金融机构的个性化需求。
891 7
|
JSON 前端开发 Java
【JAVA进阶篇教学】第七篇:Spring中常用注解
【JAVA进阶篇教学】第七篇:Spring中常用注解
|
算法 5G 定位技术
室内导航怎么实现?解决方案与案例分享
本文探讨了室内导航的实现原理、关键技术、用户体验优化及未来发展趋势。通过Wi-Fi定位、蓝牙Beacon、UWB和视觉SLAM等多种技术,结合高精度地图绘制和路径规划算法,实现室内AR导航及定位导航。文章还介绍了性化服务和成功案例,展望了5G、物联网和AI等技术在室内导航中的应用前景。
1314 0
|
存储 安全 Linux
linux centos7中使用 Postfix 和Dovecot搭建邮件系统
linux centos7中使用 Postfix 和Dovecot搭建邮件系统
725 1