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 相关文章推荐
提高网站信任度的技巧
Oct 17 Javascript
JavaScript 继承详解(三)
Jul 13 Javascript
JavaScript的变量作用域深入理解
Oct 25 Javascript
jQuery的实现原理的模拟代码 -1 核心部分
Aug 01 Javascript
一个js导致的jquery失效问题的解决方法
Nov 27 Javascript
jquery内置验证(validate)使用方法示例(表单验证)
Dec 04 Javascript
js实现对ajax请求面向对象的封装
Jan 08 Javascript
AngularJS自定义插件实现网站用户引导功能示例
Nov 07 Javascript
BootStrapValidator校验方式
Dec 19 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
May 11 Javascript
Vue 2.0的数据依赖实现原理代码简析
Jul 10 Javascript
微信小程序 拍照或从相册选取图片上传代码实例
Aug 28 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中开发XML应用程序之基础篇 添加节点 删除节点 查询节点 查询节
2010/07/09 PHP
yii2分页之实现跳转到具体某页的实例代码
2016/06/02 PHP
PHP数组相加操作及与array_merge的区别浅析
2016/11/26 PHP
php时间戳转换代码详解
2019/08/04 PHP
javascript中运用闭包和自执行函数解决大量的全局变量问题
2010/12/30 Javascript
jQuery表单美化插件jqTransform使用详解
2015/04/12 Javascript
JQuery插件jcarousellite的参数中文说明
2015/05/11 Javascript
简介JavaScript中的unshift()方法的使用
2015/06/09 Javascript
利用Angular.js限制textarea输入的字数
2016/10/20 Javascript
浅析如何利用angular结合translate为项目实现国际化
2016/12/08 Javascript
使用vue制作探探滑动堆叠组件的实例代码
2018/03/07 Javascript
修改node.js默认的npm安装目录实例
2018/05/15 Javascript
vue通过style或者class改变样式的实例代码
2018/10/30 Javascript
js中怎么判断两个字符串相等的实例
2019/01/17 Javascript
Vue从TodoList中学父子组件通信
2019/02/05 Javascript
JS变量提升原理与用法实例浅析
2020/05/22 Javascript
python编写的最短路径算法
2015/03/25 Python
python递归实现快速排序
2018/08/18 Python
pycharm恢复默认设置或者是替换pycharm的解释器实例
2018/10/29 Python
通过python3实现投票功能代码实例
2019/09/26 Python
pytorch模型预测结果与ndarray互转方式
2020/01/15 Python
python多进程使用函数封装实例
2020/05/02 Python
CSS3只让背景图片旋转180度的实现示例
2021/03/09 HTML / CSS
美国购买和销售礼品卡平台:Raise
2017/01/13 全球购物
Peter Millar官网:美国高档生活服饰品牌
2018/07/02 全球购物
在职党员进社区活动总结
2014/07/05 职场文书
大学生推广普通话演讲稿
2014/09/21 职场文书
渠道运营商合作协议书范本
2014/10/06 职场文书
工作汇报开头与结尾怎么写
2014/11/08 职场文书
2014年加油站站长工作总结
2014/12/23 职场文书
医德医风个人总结
2015/02/28 职场文书
讲座通知范文
2015/04/23 职场文书
2015年女工委工作总结
2015/07/27 职场文书
2016年国培心得体会及反思
2016/01/13 职场文书
react国际化react-intl的使用
2021/05/06 Javascript
Python中异常处理用法
2021/11/27 Python