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 相关文章推荐
判断iframe是否加载完成的完美方法
Jan 07 Javascript
jQuery中add实现同时选择两个id对象
Oct 22 Javascript
JavaScript forEach()遍历函数使用及介绍
Jul 08 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
Dec 01 Javascript
使用jQuery监听DOM元素大小变化
Feb 24 Javascript
在Docker快速部署Node.js应用的详细步骤
Sep 02 Javascript
微信小程序 网络API Websocket详解
Nov 09 Javascript
JavaScript数组迭代方法
Mar 03 Javascript
Vue自定义toast组件的实例代码
Aug 15 Javascript
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
JS判断用户用的哪个浏览器实例详解
Oct 09 Javascript
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
Sep 03 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
apache mysql php 源码编译使用方法
2012/05/03 PHP
php jquery 多文件上传简单实例
2013/12/23 PHP
PHP 读取和编写 XML
2014/11/19 PHP
PHP编写文件多服务器同步程序
2016/07/02 PHP
ThinkPHP5框架实现简单的批量查询功能示例
2018/06/07 PHP
AJAX的跨域与JSONP(为文章自动添加短址的功能)
2010/01/17 Javascript
jquery 仿QQ校友的DIV模拟窗口效果源码
2010/03/24 Javascript
JavaScript的类型、值和变量小结
2015/07/09 Javascript
理解javascript中Map代替循环
2016/02/26 Javascript
jQuery插件passwordStrength密码强度指标详解
2016/06/24 Javascript
JS实现的多张图片轮流播放幻灯片效果
2016/07/22 Javascript
js导出excel文件的简洁方法(推荐)
2016/11/02 Javascript
JavaScript数据结构之数组的表示方法示例
2017/04/12 Javascript
xmlplus组件设计系列之分隔框(DividedBox)(8)
2017/05/02 Javascript
vue权限路由实现的方法示例总结
2018/07/29 Javascript
微信小程序分享海报生成的实现方法
2018/12/10 Javascript
js中的数组对象排序分析
2018/12/11 Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
2019/03/29 Javascript
解决vuex刷新数据消失问题
2020/11/12 Javascript
python 提取文件的小程序
2009/07/29 Python
Python赋值语句后逗号的作用分析
2015/06/08 Python
Python元组及文件核心对象类型详解
2018/02/11 Python
在python2.7中用numpy.reshape 对图像进行切割的方法
2018/12/05 Python
Python列表切片操作实例总结
2019/02/19 Python
解决pyshp UnicodeDecodeError的问题
2019/12/06 Python
python读取与处理netcdf数据方式
2020/02/14 Python
丝芙兰美国官网:SEPHORA美国
2016/08/03 全球购物
车间操作工岗位职责
2013/12/19 职场文书
会计专业毕业自荐书范文
2014/02/08 职场文书
小学语文教学反思
2014/02/10 职场文书
大学新生军训感言
2014/02/25 职场文书
团员个人总结
2015/02/26 职场文书
2016年“5.12”护士节慰问信
2015/11/30 职场文书
小学音乐课教学反思
2016/02/18 职场文书
毕业生的自我鉴定表范文
2019/05/16 职场文书
MySQL导致索引失效的几种情况
2022/06/25 MySQL