javascript encodeURI和encodeURIComponent的比较


Posted in Javascript onApril 03, 2010

背景
encodeURI 和 encodeURIComponent都是ECMA-262标准中定义的函数,所有兼容这个标准的语言(如JavaScript, ActionScript)都会实现这两个函数。它们都是用来对URI (RFC-2396)字符串进行编码的全局函数,但是它们的处理方式和使用场景有所不同。为了解释它们的不同,我们首先需要理解RFC-2396中对于URI中的字符分类
保留字符(reserved characters):这类字符是URI中的保留关键字符,它们用于分割URI中的各个部分。这些字符是:";" | "/" | "?" | ":" | "@" | "&" | "=" | "+" | "$" | ","
Mark字符(mark characters):这类字符在RFC-2396中特别定义,但是没有特别说明用途,可能是和别的RFC标准相关。 这些字符是:"-" | "_" | "." | "!" | "~" | "*" | "'" | "(" | ")"
基本字符(alphanum characters):这类字符是URI中的主体部分,它包括所有的大写字母、小写字母和数字
在介绍完上面三类字符串后,我们就非常容易来解释encodeURI和encodeURIComponent函数的不同之处了:
encodeURI: 该函数对传入字符串中的所有非(基本字符、Mark字符和保留字符)进行转义编码(escaping)。所有的需要转义的字符都按照UTF-8编码转化成为一个、两个或者三个字节的十六进制转义字符(%xx)。例如,字符空格" "转换成为"%20"。在这种编码模式下面,需要编码的ASCII字符用一个字节转义字符代替,在\u0080和\u007ff之间的字符用两个字节转义字符代替,其他16为Unicode字符用三个字节转义字符代替
encodeURIComponent: 该函数处理方式和encodeURI只有一个不同点,那就是对于保留字符同样做转义编码。例如,字符":"被转义字符"%3A"代替
之所以有上面两个不同的函数,是因为我们在写JS代码的时候对URI进行两种不同的编码处理需求。encodeURI可以用来对完整的URI字符串进行编码处理。而encodeURIComponent可以对URI中一个部分进行编码,从而让这一部分可以包含一些URI保留字符。这在我们日常编程中是十分有用的。比如下面的URI字符串:
http://www.mysite.com/send-to-friend.aspx?url=http://www.mysite.com/product.html
在这个URI字符串中。send-to-friend.aspx页面会创建HTML格式的邮件内容,里面会包含一个链接,这个链接的地址就是上面URI字符串中的url值。显然上面的url值是URI中的一个部分,里面包含了URI保留关键字符。我们必须调用encodeURIComponent对它进行编码后使用,否则上面的URI字符串会被浏览器认为是一个无效的URI。正确的URI应该如下:
http://www.mysite.com/send-to-friend.aspx?url=http%3A%2F%2Fwww.mysite.com%2Fproduct.html
例子
encodeURI

var uri="my test.asp?name=ståle&car=saab"; 
document.write(encodeURI(uri));

上面的输出如下:
my%20test.asp?name=st%C3%A5le&car=saab

encodeURIComponent

var uri="http://3water.com/my test.asp?name=ståle&car=saab"; 
document.write(encodeURIComponent(uri));

上面的输出如下:
http%3A%2F%2F3water.com%2Fmy%20test.asp%3Fname%3Dst%C3%A5le%26car%3Dsaab
其他
在ECMA-262标准中还定义了和这两个encode函数向对应的decode全局函数,它们是decodeURI和decodeURIComponent。我们可以用它们来decode编码后的字符串
Javascript 相关文章推荐
JavaScript.Encode手动解码技巧
Jul 14 Javascript
JavaScript 放大镜 移动镜片效果代码
May 09 Javascript
封装的jquery翻页滚动(示例代码)
Nov 18 Javascript
jQuery中ajax的load()方法用法实例
Dec 26 Javascript
jQuery实现图片预加载效果
Nov 27 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
Jul 19 Javascript
node.js通过axios实现网络请求的方法
Mar 05 Javascript
JavaScript canvas仿代码流瀑布
Feb 10 Javascript
vue基于better-scroll仿京东分类列表
Jun 30 Javascript
vuex分模块后,实现获取state的值
Jul 26 Javascript
vue如何使用rem适配
Feb 06 Vue.js
js实现自动锁屏功能
Jun 02 Javascript
jQuery 技巧小结
Apr 02 #Javascript
jquery 页面全选框实践代码
Apr 02 #Javascript
jQuery 自动增长的文本输入框实现代码
Apr 02 #Javascript
jquery select下拉框操作的一些说明
Apr 02 #Javascript
纯JavaScript实现的完美渐变弹出层效果代码
Apr 02 #Javascript
AJAX使用了UpdatePanel后无法使用alert弹出脚本
Apr 02 #Javascript
获取焦点时,利用js定时器设定时间执行动作
Apr 02 #Javascript
You might like
PHP实现采集中国天气网未来7天天气
2014/10/15 PHP
PHP模拟asp.net的StringBuilder类实现方法
2015/08/08 PHP
使用php实现网站验证码功能【推荐】
2017/02/09 PHP
Yii框架的布局文件实例分析
2019/09/04 PHP
PHP设计模式之外观模式(Facade)入门与应用详解
2019/12/13 PHP
实用javaScript技术-屏蔽类
2006/08/15 Javascript
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
2006/12/22 Javascript
解决表单中第一个非隐藏的元素获得焦点的一个方案
2009/10/26 Javascript
遍历jquery对象的代码分享
2011/11/02 Javascript
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
2012/02/03 Javascript
JS常用字符串处理方法应用总结
2014/05/22 Javascript
JavaScript实现节点的删除与序号重建实例
2015/08/05 Javascript
认识Knockout及如何使用Knockout绑定上下文
2015/12/25 Javascript
JS原型、原型链深入理解
2016/02/27 Javascript
深入浅析Extjs中store分组功能的使用方法
2016/04/20 Javascript
JS声明式函数与赋值式函数实例分析
2016/12/13 Javascript
利用Javascript实现一套自定义事件机制
2017/12/14 Javascript
小程序开发中如何使用async-await并封装公共异步请求的方法
2019/01/20 Javascript
20道JS原理题助你面试一臂之力(必看)
2019/07/22 Javascript
Python 解析XML文件
2009/04/15 Python
python实现ip查询示例
2014/03/26 Python
Python Trie树实现字典排序
2014/03/28 Python
python实现数组插入新元素的方法
2015/05/22 Python
Series和DataFrame使用简单入门
2019/11/13 Python
浅析python内置模块collections
2019/11/15 Python
用HTML5实现网站在windows8中贴靠的方法
2013/04/21 HTML / CSS
整个世界的设计师家具在哈恩:Designathome
2019/03/25 全球购物
初中考试作弊检讨书
2014/02/01 职场文书
父母对孩子说的话
2014/04/12 职场文书
护理专业毕业生自荐信
2014/06/15 职场文书
师德师风自查材料
2014/10/14 职场文书
离婚协议书范本及离婚须知
2014/10/15 职场文书
毕业实习感受与体会
2015/05/26 职场文书
读《工匠精神》有感:热爱工作,精益求精
2019/12/28 职场文书
项目中Nginx多级代理是如何获取客户端的真实IP地址
2022/05/30 Servers
MyBatis在注解上使用动态SQL方式(@select使用if)
2022/07/07 Java/Android