深入分析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 相关文章推荐
只需20行代码就可以写出CSS覆盖率测试脚本
Apr 24 Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
Jun 21 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
Aug 24 Javascript
Jquery 垂直多级手风琴菜单附源码下载
Nov 17 Javascript
浅谈JS中的bind方法与函数柯里化
Aug 10 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
Oct 12 Javascript
jQuery源码分析之sizzle选择器详解
Feb 13 Javascript
Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法
Jun 29 Javascript
原生JS获取元素的位置与尺寸实现方法
Oct 18 Javascript
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
Vue项目添加动态浏览器头部title的方法
Jul 11 Javascript
JavaScript中Dom操作实例详解
Jul 08 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
使用php来实现网络服务
2009/09/15 PHP
PHP实现今天是星期几的几种写法
2013/09/26 PHP
PHP连接MySQL数据的操作要点
2015/03/20 PHP
PHP实现批量修改文件后缀名的方法
2015/07/30 PHP
thinkPHP框架实现的简单计算器示例
2018/12/07 PHP
PHP进阶学习之垃圾回收机制详解
2019/06/18 PHP
北京奥运官方网站幻灯切换效果flash版打包下载
2008/01/30 Javascript
几个比较经典常用的jQuery小技巧
2010/03/01 Javascript
javaScript实现滚动新闻的方法
2015/07/30 Javascript
跟我学习javascript的定时器
2015/11/19 Javascript
你一定会收藏的Nodejs代码片段
2016/02/04 NodeJs
html中鼠标滚轮事件onmousewheel的处理方法
2016/11/11 Javascript
vue时间格式化实例代码
2017/06/13 Javascript
vue复合组件实现注册表单功能
2017/11/06 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
2018/09/18 Javascript
js实现跟随鼠标移动的小球
2019/08/26 Javascript
electron 如何将任意资源打包的方法步骤
2020/04/16 Javascript
基于多进程中APScheduler重复运行的解决方法
2019/07/22 Python
解决python父线程关闭后子线程不关闭问题
2020/04/25 Python
Django 构建模板form表单的两种方法
2020/06/14 Python
解决Python3.7.0 SSL低版本导致Pip无法使用问题
2020/09/03 Python
如何用python爬取微博热搜数据并保存
2021/02/20 Python
html5 canvas 使用示例
2010/10/22 HTML / CSS
ToysRus日本官网:玩具反斗城
2018/09/08 全球购物
几道Java和数据库的面试题
2013/05/30 面试题
生产车间实习自我鉴定
2013/09/23 职场文书
质检的岗位职责
2013/11/17 职场文书
五年级英语教学反思
2014/01/31 职场文书
初级会计求职信范文
2014/02/15 职场文书
中学校庆方案
2014/03/17 职场文书
毕业感言怎么写
2015/07/31 职场文书
干部考核工作总结
2015/08/12 职场文书
2016护理专业求职自荐书
2016/01/28 职场文书
读《庄子》有感:美而不自知
2019/11/06 职场文书
MySQL中几种插入和批量语句实例详解
2021/09/14 MySQL
Ruby处理YAML和json数据
2022/04/18 Ruby