js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解


Posted in Javascript onApril 01, 2016

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的跳转。

Javascript 相关文章推荐
Using the TextRange Object
Oct 14 Javascript
JavaScript 动态生成方法的例子
Jul 22 Javascript
js自定义事件及事件交互原理概述(一)
Feb 01 Javascript
Jquery对select的增、删、改、查操作
Feb 06 Javascript
jquery任意位置浮动固定层插件用法实例
May 29 Javascript
用Move.js配合创建CSS3动画的入门指引
Jul 22 Javascript
js 求时间差的实现代码
Apr 26 Javascript
JavaScript计算器网页版实现代码分享
Jul 15 Javascript
深入浅析JavaScript中的3DES
Aug 24 Javascript
Angular.js中数组操作的方法教程
Jul 31 Javascript
对angularJs中$sce服务安全显示html文本的实例
Sep 30 Javascript
细述Javascript的加法运算符的具体使用
Oct 18 Javascript
基于jquery实现轮播焦点图插件
Mar 31 #Javascript
javascript中错误使用var造成undefined
Mar 31 #Javascript
详解JavaScript表单验证(E-mail 验证)
Mar 31 #Javascript
js表单验证实例讲解
Mar 31 #Javascript
javascript创建cookie、读取cookie
Mar 31 #Javascript
基于javascript实现全屏漂浮广告
Mar 31 #Javascript
JS深度拷贝Object Array实例分析
Mar 31 #Javascript
You might like
PHP最常用的2种设计模式工厂模式和单例模式介绍
2012/08/14 PHP
PHP防盗链代码实例
2014/08/27 PHP
php ajax confirm 删除实例详解
2019/03/06 PHP
php实现的顺序线性表示例
2019/05/04 PHP
PHP字符串和十六进制如何实现互相转换
2020/07/16 PHP
JavaScript 在网页上单击鼠标的地方显示层及关闭层
2012/12/30 Javascript
jquery datatable后台封装数据示例代码
2014/08/07 Javascript
javascript实现点击后变换按钮显示文字的方法
2015/05/13 Javascript
javascript仿百度输入框提示自动下拉补全
2016/01/07 Javascript
jQuery选择器基础入门教程
2016/05/10 Javascript
js实现可控制左右方向的无缝滚动效果
2016/05/29 Javascript
js实现淡入淡出轮播切换功能
2017/01/13 Javascript
浅谈 Vue 项目优化的方法
2017/12/16 Javascript
微信小程序实现倒计时补零功能
2018/07/09 Javascript
移动端吸顶fixbar的解决方案详解
2019/07/17 Javascript
JavaScript实时更新当前的时间的示例代码
2020/07/15 Javascript
Vue实现boradcast和dispatch的示例
2020/11/13 Javascript
Python中实现字符串类型与字典类型相互转换的方法
2014/08/18 Python
横向对比分析Python解析XML的四种方式
2016/03/30 Python
python enumerate函数的使用方法总结
2017/11/15 Python
Django migrations 默认目录修改的方法教程
2018/09/28 Python
使用python的turtle绘画滑稽脸实例
2019/11/21 Python
Python计算机视觉里的IOU计算实例
2020/01/17 Python
Python接口自动化测试框架运行原理及流程
2020/11/30 Python
CSS3新属性transition-property transform box-shadow实例学习
2013/06/06 HTML / CSS
南威尔士家居商店:Leekes
2016/10/25 全球购物
澳大利亚现代波西米亚风格女装网站:Bohemian Traders
2018/04/16 全球购物
曼城官方网上商店:Manchester City
2019/09/10 全球购物
物流仓储实习自我鉴定
2013/09/25 职场文书
竞选体育委员演讲稿
2014/04/26 职场文书
师范类求职信
2014/06/21 职场文书
体育教师求职信
2014/06/30 职场文书
公司合作意向书范文
2014/07/30 职场文书
学校联谊协议书
2014/09/16 职场文书
教您:房贷工资收入证明应该怎么写?
2019/08/19 职场文书
Unicode中的CJK(中日韩统一表意文字)字符小结
2021/12/06 HTML / CSS