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不同页面传值的改进版
Sep 30 Javascript
csdn 批量接受好友邀请
Feb 19 Javascript
html dom节点操作(获取/修改/添加或删除)
Jan 23 Javascript
JS实现可展开折叠层的鼠标拖曳效果
Oct 09 Javascript
jQuery中设置form表单中action值的实现方法
May 25 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
Mar 08 Javascript
vue语法之拼接字符串的示例代码
Oct 25 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
May 04 Javascript
vue如何将v-for中的表格导出来
May 07 Javascript
JQuery中queue方法用法示例
Jan 31 jQuery
JS异步执行结果获取的3种解决方式
Feb 19 Javascript
vue store之状态管理模式的详细介绍
Jun 13 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
虫族 Zerg 热键控制
2020/03/14 星际争霸
php SQL防注入代码集合
2008/04/25 PHP
php strtotime 函数UNIX时间戳
2009/01/14 PHP
基于curl数据采集之单页面并行采集函数get_htmls的使用
2013/04/28 PHP
PHP中$GLOBALS['HTTP_RAW_POST_DATA']和$_POST的区别分析
2017/07/03 PHP
使用prototype.js 的时候应该特别注意的几个问题.
2007/04/12 Javascript
改写一个简单的菜单 弹性大小
2010/12/02 Javascript
javascript SpiderMonkey中的函数序列化如何进行
2012/12/05 Javascript
JS中setTimeout()的用法详解
2013/04/14 Javascript
Javascript 实现的数独解题算法网页实例
2013/10/15 Javascript
jQuery实现平滑滚动的标签分栏切换效果
2015/08/28 Javascript
jQuery EasyUi实战教程之布局篇
2016/01/26 Javascript
JavaScript中instanceof运算符的使用示例
2016/06/08 Javascript
JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法【附demo源码】
2016/08/19 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
2016/10/19 Javascript
Bootstrap导航条学习使用(一)
2017/02/08 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
2018/08/24 Javascript
Vue中使用JsonView来展示Json树的实例代码
2020/11/16 Javascript
Python的print用法示例
2014/02/11 Python
Python实现字典依据value排序
2016/02/24 Python
python使用xslt提取网页数据的方法
2018/02/23 Python
Python使用Django实现博客系统完整版
2020/09/29 Python
python中字符串比较使用is、==和cmp()总结
2018/03/18 Python
Sanic框架请求与响应实例分析
2018/07/16 Python
Django页面数据的缓存与使用的具体方法
2019/04/23 Python
Python从list类型、range()序列简单认识类(class)【可迭代】
2019/05/31 Python
windows下python虚拟环境virtualenv安装和使用详解
2019/07/16 Python
python用match()函数爬数据方法详解
2019/07/23 Python
django框架使用views.py的函数对表进行增删改查内容操作详解【models.py中表的创建、views.py中函数的使用,基于对象的跨表查询】
2019/12/12 Python
pytorch-神经网络拟合曲线实例
2020/01/15 Python
python 常用日期处理-- datetime 模块的使用
2020/09/02 Python
python des,aes,rsa加解密的实现
2021/01/16 Python
毕业生自荐书
2013/12/18 职场文书
国际贸易求职信
2014/07/05 职场文书
公司劳动纪律管理制度
2015/08/04 职场文书
护士业务学习心得体会
2016/01/25 职场文书