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中遭遇级联表达式陷阱
Mar 08 Javascript
使用js获取QueryString的方法小结
Feb 28 Javascript
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
May 07 Javascript
js判断undefined变量类型使用typeof
Jun 03 Javascript
浏览器兼容console对象的简要解决方案分享
Oct 24 Javascript
jQuery类选择器用法实例
Dec 23 Javascript
javascript简单比较日期大小的方法
Jan 05 Javascript
如何实现json数据可视化详解
Nov 24 Javascript
JS实现的驼峰式和连字符式转换功能分析
Dec 21 Javascript
PHP实现本地图片上传和验证功能
Feb 27 Javascript
使用mixins实现elementUI表单全局验证的解决方法
Apr 02 Javascript
微信小程序在text文本实现多种字体样式
Nov 08 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服务器实现多session并发运行
2006/10/09 PHP
IIS php环境配置PHP5 MySQL5 ZendOptimizer phpmyadmin安装与配置
2008/11/18 PHP
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
2013/04/17 Javascript
红米手机抢购的js代码
2014/03/10 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
2016/02/02 Javascript
js修改onclick动作的四种方法(推荐)
2016/08/18 Javascript
bootstrap下拉菜单使用方法解析
2017/01/13 Javascript
JavaScript实现按键精灵的原理分析
2017/02/21 Javascript
JS实现上传图片的三种方法并实现预览图片功能
2017/07/14 Javascript
微信小程序引用公共js里的方法的实例详解
2017/08/17 Javascript
AngularJS实现的简单拖拽功能示例
2018/01/02 Javascript
浅谈React之状态(State)
2018/09/19 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
2019/06/26 Javascript
python 的列表遍历删除实现代码
2020/04/12 Python
深入解读Python解析XML的几种方式
2016/02/16 Python
Python中模块pymysql查询结果后如何获取字段列表
2017/06/05 Python
Python实现改变与矩形橡胶的线条的颜色代码示例
2018/01/05 Python
Django实现全文检索的方法(支持中文)
2018/05/14 Python
python三大神器之fabric使用教程
2019/06/10 Python
python实现超市管理系统(后台管理)
2019/10/25 Python
python3中numpy函数tile的用法详解
2019/12/04 Python
Python中Subprocess的不同函数解析
2019/12/10 Python
解决Keras 与 Tensorflow 版本之间的兼容性问题
2020/02/07 Python
Pytorch 使用opnecv读入图像由HWC转为BCHW格式方式
2020/06/02 Python
python之pygame模块实现飞机大战完整代码
2020/11/29 Python
应届生.NET方向面试题
2015/05/23 面试题
资料员岗位职责
2013/11/17 职场文书
视光学毕业生自荐书范文
2014/02/13 职场文书
幼儿园母亲节活动方案
2014/03/10 职场文书
《灰椋鸟》教学反思
2014/04/27 职场文书
酒店管理求职信
2014/06/09 职场文书
学校志愿者活动总结
2014/06/27 职场文书
应届毕业生求职信范文
2014/07/07 职场文书
明星员工获奖感言
2014/08/14 职场文书
国家助学金感谢信
2015/01/21 职场文书
实习单位鉴定意见
2015/06/04 职场文书