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 相关文章推荐
非html5实现js版弹球游戏示例代码
Sep 22 Javascript
jquery动态更换设置背景图的方法
Mar 25 Javascript
javascript实现浏览器窗口传递参数的方法
Sep 03 Javascript
JavaScript设计模式之工厂模式和构造器模式
Feb 11 Javascript
js实现统计字符串中特定字符出现个数的方法
Aug 02 Javascript
微信小程序中多个页面传参通信的学习与实践
May 05 Javascript
JavaScript之iterable_动力节点Java学院整理
Jun 29 Javascript
细说webpack源码之compile流程-入口函数run
Dec 26 Javascript
vue iview组件表格 render函数的使用方法详解
Mar 15 Javascript
vue 使用 canvas 实现手写电子签名
Mar 06 Javascript
Vue 3.0 全家桶抢先体验
Apr 28 Javascript
详解Vue的异步更新实现原理
Dec 22 Vue.js
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
Zend Framework入门教程之Zend_Config组件用法详解
2016/12/09 PHP
一个可绑定数据源的jQuery数据表格插件
2010/07/17 Javascript
jQuery中用dom操作替代正则表达式
2014/12/29 Javascript
浅谈JavaScript中null和undefined
2015/07/09 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
2016/01/26 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
2016/04/03 Javascript
JS使用JSON作为参数实例分析
2016/06/23 Javascript
nodeJs内存泄漏问题详解
2016/09/05 NodeJs
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
2016/12/20 Javascript
windows 下安装nodejs 环境变量设置
2017/02/02 NodeJs
微信小程序-滚动消息通知的实例代码
2017/08/03 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
2017/08/16 Javascript
JavaScript闭包的简单应用
2017/09/01 Javascript
原生javascript实现文件异步上传的实例讲解
2017/10/26 Javascript
bootstrap动态调用select下拉框的实例代码
2018/08/09 Javascript
详解react native页面间传递数据的几种方式
2018/11/07 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
2019/11/26 Javascript
vue 自定义组件的写法与用法详解
2020/03/04 Javascript
[02:31]2018年度DOTA2最具人气选手-完美盛典
2018/12/16 DOTA
python使用chardet判断字符串编码的方法
2015/03/13 Python
Python实现PS滤镜功能之波浪特效示例
2018/01/26 Python
python面向对象多线程爬虫爬取搜狐页面的实例代码
2018/05/31 Python
10招!看骨灰级Pythoner玩转Python的方法
2019/04/15 Python
在Qt5和PyQt5中设置支持高分辨率屏幕自适应的方法
2019/06/18 Python
python中逻辑与或(and、or)和按位与或异或(&、|、^)区别
2020/08/05 Python
Python判断字符串是否为合法标示符操作
2020/09/03 Python
用python写PDF转换器的实现
2020/10/29 Python
CSS3 实现侧边栏展开收起动画
2014/12/22 HTML / CSS
分享一个H5原生form表单的checkbox特效代码
2018/02/26 HTML / CSS
浅谈html5增强的页面元素
2016/06/14 HTML / CSS
美国著名的团购网站:Woot
2016/08/02 全球购物
英国复古服装和球衣购买网站:3Retro Football
2018/07/09 全球购物
电子商务专业应届生求职信
2014/05/28 职场文书
优秀毕业生找工作自荐信
2014/06/23 职场文书
领导班子整改方案
2014/10/25 职场文书
酒店圣诞节活动总结
2015/05/06 职场文书