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 相关文章推荐
图片连续滚动代码[兼容IE/firefox]
Jun 11 Javascript
jquery实现不同大小浏览器使用不同的css样式表的方法
Apr 02 Javascript
AngularJS控制器继承自另一控制器
May 09 Javascript
js改变style样式和css样式的简单实例
Jun 28 Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
Sep 17 Javascript
Javascript实现倒计时(防页面刷新)实例
Dec 13 Javascript
EasyUI中的dataGrid的行内编辑
Jun 22 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
Jul 23 Javascript
JS实现浏览上传文件的代码
Aug 23 Javascript
Express的HTTP重定向到HTTPS的方法
Jun 06 Javascript
原生js实现照片墙效果
Oct 13 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
Oct 27 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
file_get_contents获取不到网页内容的解决方法
2013/03/07 PHP
php中出现空白页的原因及解决方法汇总
2014/07/08 PHP
android上传图片到PHP的过程详解
2015/08/03 PHP
PHP中的数组处理函数实例总结
2016/01/09 PHP
PHP使用xpath解析XML的方法详解
2017/05/20 PHP
JS实现程序暂停与继续功能代码解读
2013/10/10 Javascript
jQuery使用ajax跨域获取数据的简单实例
2016/05/18 Javascript
利用npm 安装删除模块的方法
2018/05/15 Javascript
JavaScript类数组对象转换为数组对象的方法实例分析
2018/07/24 Javascript
微信小程序wepy框架笔记小结
2018/08/08 Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
2018/09/28 Javascript
vue开发环境配置跨域的方法步骤
2019/01/16 Javascript
基于Node.js搭建hexo博客过程详解
2019/06/25 Javascript
使用vue-router在Vue页面之间传递数据的方法
2019/07/15 Javascript
react用Redux中央仓库实现一个todolist
2019/09/29 Javascript
vue如何使用外部特殊字体的操作
2020/07/30 Javascript
[55:32]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第二场
2018/04/05 DOTA
Python实现HTTP协议下的文件下载方法总结
2016/04/20 Python
Python实现类的创建与使用方法示例
2017/07/25 Python
python 使用re.search()筛选后 选取部分结果的方法
2018/11/28 Python
把django中admin后台界面的英文修改为中文显示的方法
2019/07/26 Python
如何基于python实现归一化处理
2020/01/20 Python
Python 实现向word(docx)中输出
2020/02/13 Python
Spring @Enable模块驱动原理及使用实例
2020/06/23 Python
瑞士图书网站:Weltbild.ch
2019/09/17 全球购物
Big Green Smile法国:领先的英国有机和天然产品在线商店
2021/01/02 全球购物
NET程序员上机面试题
2015/05/23 面试题
微博营销计划书
2014/01/10 职场文书
幼儿园教师辞职信
2014/01/18 职场文书
《孔子游春》教学反思
2014/02/25 职场文书
企业精细化管理实施方案
2014/03/23 职场文书
入党综合考察材料
2014/06/02 职场文书
王兆力在市委党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
法人代表资格证明书
2015/06/18 职场文书
小学六年级毕业感言
2015/07/30 职场文书
国家助学金受助感言
2015/08/01 职场文书