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 中对象的继承〔转贴〕
Jan 22 Javascript
javascript 通用简单的table选项卡实现
May 07 Javascript
JavaScript函数使用的基本教程
Jun 04 Javascript
jQuery实现tab选项卡效果的方法
Jul 08 Javascript
jquery中validate与form插件提交的方式小结
Mar 26 Javascript
iframe中使用jquery进行查找的方法【案例分析】
Jun 17 Javascript
headjs实现网站并行加载但顺序执行JS
Nov 29 Javascript
JavaScript实现一个空中避难的小游戏
Jun 06 Javascript
微信小程序用户信息encryptedData详解
Aug 24 Javascript
react中Suspense的使用详解
Sep 01 Javascript
javascript History对象原理解析
Feb 17 Javascript
从原生JavaScript到React深入理解
Jul 23 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 单引号与双引号的区别
2009/11/24 PHP
php根据isbn书号查询amazon网站上的图书信息的示例
2014/02/13 PHP
Laravel5.7 Eloquent ORM快速入门详解
2019/04/12 PHP
js 禁用浏览器的后退功能的简单方法
2008/12/10 Javascript
jquery入门—数据删除与隔行变色以及图片预览
2013/01/07 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
2013/08/28 Javascript
Javascript基础教程之数据类型 (数值 Number)
2015/01/18 Javascript
浅谈JavaScript 的执行顺序
2015/08/07 Javascript
jQuery获取select选中的option的value值实现方法
2016/08/29 Javascript
微信小程序 支付功能实现PHP实例详解
2017/05/12 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
2018/04/17 Javascript
vue加载完成后的回调函数方法
2018/09/07 Javascript
修改vue源码实现动态路由缓存的方法
2020/01/21 Javascript
javascript canvas实现简易时钟例子
2020/09/05 Javascript
[52:15]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS LGD-GAMING
2014/05/23 DOTA
Python程序设计入门(3)数组的使用
2014/06/16 Python
Python简单实现TCP包发送十六进制数据的方法
2016/04/16 Python
浅谈function(函数)中的动态参数
2017/04/30 Python
python使用pil进行图像处理(等比例压缩、裁剪)实例代码
2017/12/11 Python
python绘制散点图并标记序号的方法
2018/12/11 Python
python 读取Linux服务器上的文件方法
2018/12/27 Python
详解Python中的内建函数,可迭代对象,迭代器
2019/04/29 Python
python对常见数据类型的遍历解析
2019/08/27 Python
Python倒排索引之查找包含某主题或单词的文件
2019/11/13 Python
python小项目之五子棋游戏
2019/12/26 Python
html5+css3实现一款注册表单实例
2013/04/17 HTML / CSS
HTML5实现桌面通知 提示功能
2017/10/11 HTML / CSS
波兰数码相机及配件网上商店: Cyfrowe.pl
2017/06/19 全球购物
奖学金自我鉴定范文
2013/10/03 职场文书
我的中国梦演讲稿初中篇
2014/08/19 职场文书
"9.18"国耻日演讲稿范文
2014/09/14 职场文书
单位委托书格式范本
2014/09/29 职场文书
2014年幼儿园学期工作总结
2014/12/05 职场文书
廉洁自律承诺书范文
2015/04/28 职场文书
苹果可能正在打击不进行更新的 App
2022/04/24 数码科技
使用CSS实现六边形的图片效果
2022/08/05 HTML / CSS