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 相关文章推荐
JavaScript对象学习经验整理
Oct 12 Javascript
js、css、img等浏览器缓存问题的2种解决方案
Oct 23 Javascript
ExtJs纵坐标值重复问题的解决方法
Feb 27 Javascript
JavaScript合并两个数组并去除重复项的方法
Jun 13 Javascript
javascript给span标签赋值的方法
Nov 26 Javascript
全面了解javascript三元运算符
Jun 27 Javascript
jQuery基于ID调用指定iframe页面内的方法
Jul 06 Javascript
vuejs指令详解
Feb 07 Javascript
详解React 在服务端渲染的实现
Nov 16 Javascript
JS实现iframe中子父页面跨域通讯的方法分析
Mar 10 Javascript
小程序选项卡以及swiper套用(跨页面)
Jun 19 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
Nov 06 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 CKEditor 上传图片实现代码
2009/11/06 PHP
php调用C代码的实现方法
2014/03/11 PHP
PHP实现Google plus的好友拖拽分组效果
2016/10/21 PHP
thinkphp的dump函数无输出实例代码
2016/11/15 PHP
利用PHP实现一个简单的用户登记表示例
2017/04/25 PHP
IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)
2011/08/28 Javascript
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
2011/10/31 Javascript
JQuery结合CSS操作打印样式的方法
2013/12/24 Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
2014/08/27 Javascript
jQuery取消特定的click事件
2016/02/29 Javascript
localStorage的黑科技-js和css缓存机制
2017/02/06 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
2017/02/10 Javascript
干货!教大家如何选择Vue和React
2017/03/13 Javascript
详解在Angularjs中ui-sref和$state.go如何传递参数
2017/04/24 Javascript
JS实现标签页切换效果
2017/05/04 Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
2018/08/27 Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
2019/02/21 Javascript
详解Nuxt内导航栏的两种实现方式
2020/04/16 Javascript
基于脚手架创建Vue项目实现步骤详解
2020/08/03 Javascript
Python中字符串的格式化方法小结
2016/05/03 Python
django实现同一个ip十分钟内只能注册一次的实例
2017/11/03 Python
Python实现矩阵相乘的三种方法小结
2018/07/26 Python
Python常见的pandas用法demo示例
2019/03/16 Python
Python+OpenCV+pyQt5录制双目摄像头视频的实例
2019/06/28 Python
python实现爬取百度图片的方法示例
2019/07/06 Python
英国第一豪华护肤品牌:Elemis
2017/10/12 全球购物
Aurora London官网:奢华、负担得起的皮革手袋
2020/08/01 全球购物
机械设计职业生涯规划书
2013/12/27 职场文书
师德个人剖析材料
2014/02/02 职场文书
挂牌仪式主持词
2014/03/20 职场文书
党员干部民主生活会议批评与自我批评材料
2014/09/20 职场文书
技术负责人岗位职责
2015/02/10 职场文书
优秀党员个人总结
2015/02/14 职场文书
公司地址变更通知
2015/04/25 职场文书
证婚人婚礼致辞
2015/07/28 职场文书
MySQL表的增删改查(基础)
2021/04/05 MySQL