深入分析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插件集合推荐
Apr 19 Javascript
使用js修改客户端注册表的方法
Aug 09 Javascript
JS中window.open全屏命令解析及使用示例
Dec 11 Javascript
Bootstrap基础学习
Jun 16 Javascript
JS实现黑客帝国文字下落效果
Sep 01 Javascript
实例讲解JS中setTimeout()的用法
Jan 28 Javascript
概述VUE2.0不可忽视的很多变化
Sep 25 Javascript
js实现上传图片预览方法
Oct 25 Javascript
原生js实现下拉框功能(支持键盘事件)
Jan 13 Javascript
浅谈react 同构之样式直出
Nov 07 Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
Aug 16 Javascript
微信小程序Echarts图表组件使用方法详解
Jun 25 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
收听困难?教您超简便短波广播抗干扰方法!
2021/03/01 无线电
smarty section简介与用法分析
2008/10/03 PHP
php防盗链的常用方法小结
2010/07/02 PHP
PHP 在5.1.* 和5.2.*之间 PDO数据库操作中的不同之处小结
2012/03/07 PHP
php封装一个异常的处理类
2017/06/08 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
JavaScript Array Flatten 与递归使用介绍
2011/10/30 Javascript
基于jQuery实现下拉收缩(展开与折叠)特效
2012/12/25 Javascript
利用jquery包将字符串生成二维码图片
2013/09/12 Javascript
jqgrid 表格数据导出实例
2013/11/21 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
2015/03/26 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
2016/08/05 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
2016/12/13 Javascript
easyUI下拉列表点击事件使用方法
2017/05/18 Javascript
利用JS hash制作单页Web应用的方法详解
2017/10/10 Javascript
jquery 获取索引值在一定范围的列表方法
2018/01/25 jQuery
vue 详情跳转至列表页实现列表页缓存
2019/03/27 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
2019/09/21 Javascript
浅谈vue 多个变量同时赋相同值互相影响
2020/08/05 Javascript
Python处理JSON时的值报错及编码报错的两则解决实录
2016/06/26 Python
python 删除大文件中的某一行(最有效率的方法)
2017/08/19 Python
浅谈python函数之作用域(python3.5)
2017/10/27 Python
python安装模块如何通过setup.py安装(超简单)
2018/05/05 Python
Python实现压缩文件夹与解压缩zip文件的方法
2018/09/01 Python
python读取各种文件数据方法解析
2018/12/29 Python
一文读懂Python 枚举
2020/08/25 Python
python 密码学示例——理解哈希(Hash)算法
2020/09/21 Python
美国女士时尚珠宝及配饰购物网站:Icing
2018/07/02 全球购物
JAKO-O德国野酷台湾站:德国首屈一指的婴幼童用品品牌
2019/01/14 全球购物
Michael Kors加拿大官网:购买设计师手袋、手表、鞋子、服装等
2019/03/16 全球购物
法学专业本科生自荐信范文
2013/12/17 职场文书
初二政治教学反思
2014/01/12 职场文书
信息与计算机科学职业规划范文:成为一艘有方向的船
2014/09/11 职场文书
2014审计局领导班子民主生活会对照检查材料思想汇报
2014/09/20 职场文书
建筑工地资料员岗位职责
2015/04/13 职场文书
2015年工商所工作总结
2015/05/21 职场文书