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 相关文章推荐
fmt:formatDate的输出格式详解
Jan 09 Javascript
jQuery插件expander实现图片翻转特效
May 21 Javascript
JS 循环li添加点击事件 (闭包的应用)
Dec 10 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
Feb 23 Javascript
vue.js指令v-model使用方法
Mar 20 Javascript
jquery submit()不能提交表单的解决方法
Apr 24 jQuery
Axios学习笔记之使用方法教程
Jul 21 Javascript
微信小程序实现tab和swiper切换结合效果
Jul 17 Javascript
微信小程序wx.previewImage预览图片实例详解
Dec 07 Javascript
深入理解JavaScript的值传递和引用传递
Oct 24 Javascript
vue-router源码之history类的浅析
May 21 Javascript
从源码角度来回答keep-alive组件的缓存原理
Jan 18 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
WindowsXP中快速配置Apache+PHP5+Mysql
2008/06/05 PHP
PHP脚本中include文件出错解决方法
2008/11/20 PHP
JqGrid web打印实现代码
2011/05/31 Javascript
jquery判断浏览器后退时候弹出消息的方法
2014/08/11 Javascript
jQuery将多条数据插入模态框的示例代码
2014/09/25 Javascript
JavaScript里四舍五入函数round用法实例
2015/04/06 Javascript
使用C++为node.js写扩展模块
2015/04/22 Javascript
javascript实现跨域的方法汇总
2015/06/25 Javascript
JavaScript关于提高网站性能的几点建议(一)
2016/07/24 Javascript
JavaScript中值类型和引用类型的区别
2017/02/23 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
2017/04/12 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
2017/04/20 Javascript
JS简单判断滚动条的滚动方向实现方法
2017/04/28 Javascript
详解vue跨组件通信的几种方法
2017/06/15 Javascript
利用javascript如何随机生成一定位数的密码
2017/09/22 Javascript
如何将你的AngularJS1.x应用迁移至React的方法
2018/02/01 Javascript
在小程序开发中使用npm的方法
2018/10/17 Javascript
基于 jQuery 实现键盘事件监听控件
2019/04/04 jQuery
Vue中的循环及修改差值表达式的方法
2019/08/29 Javascript
vue单文件组件无法获取$refs的问题
2020/06/24 Javascript
JS+CSS实现过渡特效
2021/01/02 Javascript
Python2与python3中 for 循环语句基础与实例分析
2017/11/20 Python
Python面向对象类编写细节分析【类,方法,继承,超类,接口等】
2019/01/05 Python
pycharm创建一个python包方法图解
2019/04/10 Python
Python实现区域填充的示例代码
2021/02/03 Python
pytho matplotlib工具栏源码探析一之禁用工具栏、默认工具栏和工具栏管理器三种模式的差异
2021/02/25 Python
HTML5网页录音和上传到服务器支持PC、Android,支持IOS微信功能
2019/04/26 HTML / CSS
韩国CJ食品专卖网:CJonmart
2016/09/11 全球购物
美国最大点评网站:Yelp
2018/02/14 全球购物
高清安全摄像头系统:Lorex Technology
2018/07/20 全球购物
垃圾回收的优点和原理。并考虑2种回收机制
2016/10/16 面试题
应届生新闻编辑求职信
2013/11/19 职场文书
高中综合实践活动总结
2014/07/07 职场文书
搬迁通知
2015/04/20 职场文书
农民工工资承诺书大全
2015/05/04 职场文书
新教师教学工作总结
2015/08/12 职场文书