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


Posted in Javascript onAugust 04, 2014

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(" rel="external nofollow" http://cang.baidu.com/bruce42")+'">退出</a>');</script>

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

Javascript 相关文章推荐
jQuery往返城市和日期查询实例讲解
Oct 09 Javascript
全面解析Bootstrap排版使用方法(标题)
Nov 30 Javascript
基于javascript实现仿百度输入框自动匹配功能
Jan 03 Javascript
基于js对象,操作属性、方法详解
Aug 11 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
Jan 08 Javascript
基于jQuery实现照片墙自动播放特效
Jan 12 Javascript
JavaScript中双向数据绑定详解
May 03 Javascript
node跨域请求方法小结
Aug 25 Javascript
9102了,你还不会移动端真机调试吗
Mar 25 Javascript
javascript创建元素和删除元素实例小结
Jun 19 Javascript
js实现金山打字通小游戏
Jul 24 Javascript
Three.js实现雪糕地球的使用示例详解
Jul 07 Javascript
checkbox选中与未选中判断示例
Aug 04 #Javascript
Node.js插件的正确编写方式
Aug 03 #Javascript
基于jquery实现的可编辑下拉框实现代码
Aug 02 #Javascript
基于编写jQuery的无缝滚动插件
Aug 02 #Javascript
js使用removeChild方法动态删除div元素
Aug 01 #Javascript
js使用html()或text()方法获取设置p标签的显示的值
Aug 01 #Javascript
js中的getAttribute方法使用示例
Aug 01 #Javascript
You might like
dedecms系统常用术语汇总
2007/04/03 PHP
div li的多行多列 无刷新分页示例代码
2013/10/16 PHP
Thinkphp5.0 框架的请求方式与响应方式分析
2019/10/14 PHP
JavaScript语法着色引擎(demo及打包文件下载)
2007/06/13 Javascript
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
2013/02/05 Javascript
JavaScript显示当然日期和时间即年月日星期和时间
2013/10/29 Javascript
技术男用来对妹子表白的百度首页
2014/07/23 Javascript
Javascript基础教程之for循环
2015/01/18 Javascript
jQuery+JSON实现AJAX二级联动实例分析
2015/12/18 Javascript
jQuery中trigger()与bind()用法分析
2015/12/18 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
2016/03/01 Javascript
基于javascript实现页面加载loading效果
2020/09/15 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
2016/12/26 Javascript
使用jQuery,Angular实现登录界面验证码详解
2017/04/27 jQuery
jQuery用户头像裁剪插件cropbox.js使用详解
2017/06/07 jQuery
详解win7 cmd执行vue不是内部命令的解决方法
2017/07/27 Javascript
微信小程序返回箭头跳转到指定页面实例解析
2019/10/08 Javascript
JS工厂模式开发实践案例分析
2019/10/17 Javascript
vue.js实现简单的计算器功能
2020/02/22 Javascript
JS+CSS实现3D切割轮播图
2020/03/21 Javascript
vue路由权限校验功能的实现代码
2020/06/07 Javascript
JavaScript实现4位随机验证码的生成
2021/01/28 Javascript
分享Python字符串关键点
2015/12/13 Python
Python读写txt文本文件的操作方法全解析
2016/06/26 Python
Python升级导致yum、pip报错的解决方法
2017/09/06 Python
python计算两个地址之间的距离方法
2018/06/09 Python
influx+grafana自定义python采集数据和一些坑的总结
2018/09/17 Python
vue常用指令代码实例总结
2020/03/16 Python
基于jupyter代码无法在pycharm中运行的解决方法
2020/04/21 Python
中软国际Java程序员笔试题
2014/07/19 面试题
《新型玻璃》教学反思
2014/04/13 职场文书
妇女干部培训方案
2014/05/12 职场文书
社区元宵节活动总结
2015/02/06 职场文书
雷峰塔导游词
2015/02/09 职场文书
假期读书倡议书3篇
2019/08/19 职场文书
微信小程序中使用vant框架的具体步骤
2022/02/18 Javascript