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 相关文章推荐
jquery multiSelect 多选下拉框
Jul 09 Javascript
jquery中this的使用说明
Sep 06 Javascript
jquery showModelDialog的使用方法示例详解
Nov 19 Javascript
JavaScript中读取和保存文件实例
May 08 Javascript
jQuery实现按键盘方向键翻页特效
Mar 18 Javascript
JS实现从连接中获取youtube的key实例
Jul 02 Javascript
JQuery ztree 异步加载实例讲解
Feb 25 Javascript
JS根据生日月份和日期计算星座的简单实现方法
Nov 24 Javascript
Node.js制作简单聊天室
Jan 12 Javascript
canvas实现钟表效果
Feb 13 Javascript
详解基于Bootstrap+angular的一个豆瓣电影app
Jun 26 Javascript
Vue 理解之白话 getter/setter详解
Apr 16 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
如何将数据从文本导入到mysql
2006/10/09 PHP
模仿OSO的论坛(三)
2006/10/09 PHP
SWFUpload与CI不能正确上传识别文件MIME类型解决方法分享
2011/04/18 PHP
PHP中spl_autoload_register函数的用法总结
2013/11/07 PHP
对PHP语言认识上需要避免的10大误区
2014/06/12 PHP
php结合正则批量抓取网页中邮箱地址
2015/05/19 PHP
PHPWind9.0手动屏蔽验证码解决后台关闭验证码但是依然显示的问题
2016/08/12 PHP
php实现简单四则运算器
2020/11/29 PHP
详解JavaScript函数绑定
2013/08/18 Javascript
最好用的省市二级联动 原生js实现你值得拥有
2013/09/22 Javascript
chrome下img加载对height()的影响示例探讨
2014/05/26 Javascript
jQuery模拟新浪微博首页滚动效果的方法
2015/03/11 Javascript
简述JavaScript的正则表达式中test()方法的使用
2015/06/16 Javascript
JavaScript学习笔记之DOM基础 2.4
2015/08/14 Javascript
Nodejs实战心得之eventproxy模块控制并发
2015/10/27 NodeJs
js方法数据验证的简单实例
2016/09/17 Javascript
使用JS正则表达式 替换括号,尖括号等
2016/11/29 Javascript
微信小程序实现皮肤功能(夜间模式)
2017/06/18 Javascript
vue生成token保存在客户端localStorage中的方法
2017/10/25 Javascript
angular 服务随记小结
2019/05/06 Javascript
[01:01:18]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#2COL VS LGD
2016/03/03 DOTA
[02:07]DOTA2新英雄展现中国元素,完美“圣典”亮相央视
2016/12/19 DOTA
Ruby使用eventmachine为HTTP服务器添加文件下载功能
2016/04/20 Python
python dict 字典 以及 赋值 引用的一些实例(详解)
2017/01/20 Python
Java分治归并排序算法实例详解
2017/12/12 Python
python 初始化一个定长的数组实例
2019/12/02 Python
使用canvas一步步实现图片打码功能的方法
2019/06/17 HTML / CSS
德国最大的网上足球商店:11teamsports
2019/09/11 全球购物
2013年办公室秘书的个人自我鉴定
2013/10/24 职场文书
小学教师师德演讲稿
2014/05/06 职场文书
2014年班组长工作总结
2014/11/20 职场文书
大学生受助感言
2015/08/01 职场文书
社区结对共建协议书
2016/03/23 职场文书
Django展示可视化图表的多种方式
2021/04/08 Python
django注册用邮箱发送验证码的实现
2021/04/18 Python
python-for x in range的用法(注意要点、细节)
2021/05/10 Python