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 相关文章推荐
JavaScrip单线程引擎工作原理分析
Sep 04 Javascript
前后台交互过程中json格式如何解析以及如何生成
Dec 26 Javascript
js/jquery解析json和数组格式的方法详解
Jan 09 Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
Feb 07 Javascript
一个Action如何调用两个不同的方法
May 22 Javascript
通过Jquery的Ajax方法读取将table转换为Json
May 31 Javascript
微信JS接口汇总及使用详解
Jan 09 Javascript
微信小程序 slider 详解及实例代码
Jan 10 Javascript
javascript常用的设计模式
Feb 09 Javascript
详解Angular 中 ngOnInit 和 constructor 使用场景
Jun 22 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
Sep 02 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
Jul 13 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的ASP防火墙
2006/10/09 PHP
PHP STRING 陷阱原理说明
2010/07/24 PHP
关于二级目录拖拽排序的实现(源码示例下载)
2013/04/26 PHP
PHP Cookie学习笔记
2016/08/23 PHP
php获取微信基础接口凭证Access_token
2018/08/23 PHP
jquery关于图形报表的运用实现代码
2011/01/06 Javascript
javascript 手动给表增加数据的小例子
2013/07/10 Javascript
JS判断是否360安全浏览器极速内核的方法
2015/01/29 Javascript
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
2015/08/11 Javascript
jQuery简单验证上传文件大小及类型的方法
2016/06/02 Javascript
类似于QQ的右滑删除效果的实现方法
2016/10/16 Javascript
javascript实现简单的可随机变色网页计算器示例
2016/12/30 Javascript
angular 用拦截器统一处理http请求和响应的方法
2017/06/08 Javascript
浅谈Vuex的状态管理(全家桶)
2017/11/04 Javascript
让网站自动生成章节目录索引的多个js代码
2018/01/07 Javascript
微信小程序使用map组件实现解析经纬度功能示例
2019/01/22 Javascript
vue中keep-alive、activated的探讨和使用详解
2020/07/26 Javascript
[02:57]2014DOTA2国际邀请赛-观众采访
2014/07/19 DOTA
python模拟登陆Tom邮箱示例分享
2014/01/13 Python
python 简单的绘图工具turtle使用详解
2017/06/21 Python
Python3实现获取图片文字里中文的方法分析
2018/12/13 Python
Python图像处理实现两幅图像合成一幅图像的方法【测试可用】
2019/01/04 Python
python广度优先搜索得到两点间最短路径
2019/01/17 Python
Django REST framework 分页的实现代码
2019/06/19 Python
TensorFLow 不同大小图片的TFrecords存取实例
2020/01/20 Python
python FTP编程基础入门
2021/02/27 Python
前端H5 Video常见使用场景简介
2020/08/21 HTML / CSS
英国经典球衣网站:Classic Football Shirts
2017/05/20 全球购物
全球摩托车装备领导者:RevZilla
2017/09/04 全球购物
《听鱼说话》教学反思
2014/02/15 职场文书
毕业典礼演讲稿
2014/05/13 职场文书
会议欢迎标语
2014/06/30 职场文书
校长四风对照检查材料
2014/09/27 职场文书
干货:我将这样书写我的演讲稿!
2019/05/09 职场文书
2019年公司卫生管理制度样本
2019/08/21 职场文书
Nginx进程管理和重载原理详解
2021/04/22 Servers