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 相关文章推荐
Jquery + Ajax调用webService实例代码(asp.net)
Aug 27 Javascript
javascript作用域容易记错的两个地方分析
Jun 22 Javascript
原生js拖拽(第一课 未兼容)拖拽思路
Mar 29 Javascript
Javascript自定义排序 node运行 实例
Jun 05 Javascript
Javascript对象属性方法汇总
Nov 21 Javascript
JavaScript动态改变div属性的实现方法
Jul 22 Javascript
jQuery扩展实现text提示还能输入多少字节的方法
Nov 28 Javascript
canvas实现简易的圆环进度条效果
Feb 28 Javascript
分享Bootstrap简单表格、表单、登录页面
Aug 04 Javascript
JavaScript中的高级函数
Jan 04 Javascript
Angular4学习教程之HTML属性绑定的方法
Jan 04 Javascript
详解处理Vue单页面应用SEO的另一种思路
Nov 09 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 foreach、while性能比较
2009/10/15 PHP
基于php实现长连接的方法与注意事项的问题
2013/05/10 PHP
PHP实现邮件群发的源码
2013/06/18 PHP
php基于GD库画五星红旗的方法
2015/02/24 PHP
javascript 面向对象编程基础 多态
2009/08/21 Javascript
window.open关于浏览器拦截问题分析及解决方法
2013/02/05 Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
2013/03/18 Javascript
js获取select标签选中值的两种方式
2014/01/09 Javascript
javascript基于HTML5 canvas制作画箭头组件
2014/06/25 Javascript
JavaScript实现页面5秒后自动跳转的方法
2015/04/16 Javascript
基于Bootstrap+jQuery.validate实现表单验证
2016/05/30 Javascript
vue调用高德地图实例代码
2017/04/28 Javascript
JS实现页面打印(整体、局部)
2017/08/18 Javascript
解决vue单页路由跳转后scrollTop的问题
2018/09/03 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
2018/09/26 Javascript
vue实现的双向数据绑定操作示例
2018/12/04 Javascript
详解vue中axios请求的封装
2019/04/08 Javascript
vue excel上传预览和table内容下载到excel文件中
2019/12/10 Javascript
分享一款超好用的JavaScript 打包压缩工具
2020/04/26 Javascript
python中的编码知识整理汇总
2016/01/26 Python
Python3.5 + sklearn利用SVM自动识别字母验证码方法示例
2019/05/10 Python
python隐藏终端执行cmd命令的方法
2019/06/24 Python
python for循环remove同一个list过程解析
2019/08/14 Python
Pytorch 实现计算分类器准确率(总分类及子分类)
2020/01/18 Python
解决ROC曲线画出来只有一个点的问题
2020/02/28 Python
python实现感知机模型的示例
2020/09/30 Python
idealfit英国:世界领先的女性健身用品和运动衣物品牌
2017/11/25 全球购物
SIXPAD智能健身仪英国官网:革命性的训练装备品牌
2018/09/27 全球购物
类如何去实现接口
2013/12/19 面试题
以下为Windows NT 下的32 位C++程序,请计算sizeof 的值
2016/12/07 面试题
个人简历中的自我评价怎么写
2014/01/26 职场文书
场地使用证明模板
2014/10/25 职场文书
介绍信模板
2015/01/31 职场文书
网络管理员岗位职责
2015/02/12 职场文书
居安思危观后感
2015/06/11 职场文书
Golang 并发下的问题定位及解决方案
2022/03/16 Golang