深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例


Posted in Javascript onAugust 04, 2014

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(" rel="external nofollow" http://cang.baidu.com/bruce42")+'">退出</a>');</script>

对URL中的参数进行编码,因为参数也是一个URL,如果不编码会影响整个URL的跳转。

Javascript 相关文章推荐
jquery 学习之二 属性(类)
Nov 25 Javascript
JavaScript之引用类型介绍
Aug 10 Javascript
使用GruntJS构建Web程序之构建篇
Jun 04 Javascript
JS实现状态栏跑马灯文字效果代码
Oct 24 Javascript
对Angular.js Controller如何进行单元测试
Oct 25 Javascript
使用Ajax生成的Excel文件并下载的实例
Nov 21 Javascript
微信小程序 template模板详解及实例代码
Mar 09 Javascript
关于vue.extend和vue.component的区别浅析
Aug 16 Javascript
angular实现input输入监听的示例
Aug 31 Javascript
vuex提交state&amp;&amp;实时监听state数据的改变方法
Sep 16 Javascript
简单了解node npm cnpm的具体使用方法
Feb 27 Javascript
node.js中process进程的概念和child_process子进程模块的使用方法示例
Feb 11 Javascript
checkbox选中与未选中判断示例
Aug 04 #Javascript
Node.js插件的正确编写方式
Aug 03 #Javascript
基于jquery实现的可编辑下拉框实现代码
Aug 02 #Javascript
基于编写jQuery的无缝滚动插件
Aug 02 #Javascript
js使用removeChild方法动态删除div元素
Aug 01 #Javascript
js使用html()或text()方法获取设置p标签的显示的值
Aug 01 #Javascript
js中的getAttribute方法使用示例
Aug 01 #Javascript
You might like
php设计模式 FlyWeight (享元模式)
2011/06/26 PHP
php删除与复制文件夹及其文件夹下所有文件的实现代码
2013/01/23 PHP
关于Zend Studio 配色方案插件的介绍
2013/06/24 PHP
php导入csv文件碰到乱码问题的解决方法
2014/02/10 PHP
DHTML 中的绝对定位
2006/11/26 Javascript
javascript利用初始化数据装配模版的实现代码
2010/11/17 Javascript
JS选项卡动态替换banner图片路径的方法
2015/05/11 Javascript
自己动手写的jquery分页控件(非常简单实用)
2015/10/28 Javascript
jQuery选择器及jquery案例详解(必看)
2016/05/20 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
2016/06/12 Javascript
VUEJS实战之修复错误并且美化时间(2)
2016/06/13 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
2016/08/29 Javascript
原生js实现网易轮播图效果
2020/04/10 Javascript
Vue0.1的过滤代码如何添加到Vue2.0直接使用
2017/08/23 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
2018/03/02 Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
2018/05/27 Javascript
如何解决React官方脚手架不支持Less的问题(小结)
2018/09/12 Javascript
vue改变循环遍历后的数据实例
2019/11/07 Javascript
Vue2.x-使用防抖以及节流的示例
2021/03/02 Vue.js
使用python获取CPU和内存信息的思路与实现(linux系统)
2014/01/03 Python
Python3遍历目录树实现方法
2015/05/22 Python
Python中的FTP通信模块ftplib的用法整理
2016/07/08 Python
Python基于回溯法子集树模板解决取物搭配问题实例
2017/09/02 Python
python基于三阶贝塞尔曲线的数据平滑算法
2019/12/27 Python
Python如何输出百分比
2020/07/31 Python
python中K-means算法基础知识点
2021/01/25 Python
浅谈基于Canvas的手绘风格图形库Rough.js
2018/03/19 HTML / CSS
新西兰床上用品和家居用品购物网站:Adairs
2018/04/27 全球购物
澳大利亚在线批发商:Simply Wholesale
2021/02/24 全球购物
财政局党的群众路线教育实践活动整改方案
2014/09/21 职场文书
工作经历证明书范文
2014/11/02 职场文书
2015年社区工作总结
2015/04/08 职场文书
导游词之新疆尼雅遗址
2019/10/16 职场文书
redis通过6379端口无法连接服务器(redis-server.exe闪退)
2021/05/08 Redis
JavaScript实例 ODO List分析
2022/01/22 Javascript
《传颂之物 虚伪的假面》BD发售宣传CM公开
2022/04/04 日漫