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 事件冒泡简介及应用
Jan 11 Javascript
基于JQuery的6个Tab选项卡插件
Sep 03 Javascript
颜色选择器 Color Picker,IE,Firefox,Opera,Safar
Nov 25 Javascript
js时间比较 js计算时间差的简单实现方法
Aug 26 Javascript
Ajax使用原生态JS验证用户名是否存在
May 26 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
Mar 30 Javascript
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
mint-ui的search组件在键盘显示搜索按钮的实现方法
Oct 27 Javascript
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
原生JS进行前后端同构
Apr 22 Javascript
React Router V4使用指南(精讲)
Sep 17 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
Jul 19 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函数计算中英文字符串长度的方法
2014/11/11 PHP
php die()与exit()的区别实例详解
2016/12/03 PHP
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
2012/12/27 Javascript
js实现浏览器的各种菜单命令比如打印、查看源文件等等
2013/10/24 Javascript
JavaScript使用slice函数获取数组部分元素的方法
2015/04/06 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
2015/06/05 Javascript
javascript常用函数(2)
2015/11/05 Javascript
JavaScript代码实现图片循环滚动效果
2020/03/19 Javascript
JQuery validate 验证一个单独的表单元素实例
2017/02/17 Javascript
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
2017/02/18 Javascript
Vue页面骨架屏的实现方法
2018/05/22 Javascript
mpvue+vant app搭建微信小程序的方法步骤
2019/02/11 Javascript
详解微信小程序文件下载--视频和图片
2019/04/24 Javascript
JavaScript:ES2019 的新特性(译)
2019/08/08 Javascript
Vue退出登录时清空缓存的实现
2019/11/12 Javascript
jQuery实现B2B网站后台管理系统侧导航
2020/07/08 jQuery
vue开发chrome插件,实现获取界面数据和保存到数据库功能
2020/12/01 Vue.js
Vue中ref和$refs的介绍以及使用方法示例
2021/01/11 Vue.js
基于python实现微信模板消息
2015/12/21 Python
Python使用回溯法子集树模板获取最长公共子序列(LCS)的方法
2017/09/08 Python
Python使用asyncio包处理并发详解
2017/09/09 Python
Python对excel文档的操作方法详解
2018/12/10 Python
详解Python进阶之切片的误区与高级用法
2018/12/24 Python
Python操作MySQL数据库的两种方式实例分析【pymysql和pandas】
2019/03/18 Python
python暴力解压rar加密文件过程详解
2019/07/05 Python
Python实现报警信息实时发送至邮箱功能(实例代码)
2019/11/11 Python
Python写捕鱼达人的游戏实现
2020/03/31 Python
西海岸男士和男童服装:Johnnie-O
2018/03/15 全球购物
如何写一个自定义标签
2012/12/28 面试题
初入社会应届生求职信
2013/11/18 职场文书
环保建议书300字
2014/05/14 职场文书
2015财务年终工作总结范文
2015/05/22 职场文书
SQL中的三种去重方法小结
2021/11/01 SQL Server
详解python的异常捕获
2022/03/03 Python
Nginx+Tomcat负载均衡多实例详解
2022/04/11 Servers
Python爬取奶茶店数据分析哪家最好喝以及性价比
2022/09/23 Python