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 相关文章推荐
Mootools 1.2教程 设置和获取样式表属性
Sep 15 Javascript
简单学习JavaScript中的for语句循环结构
Nov 10 Javascript
js实现文字滚动效果
Mar 03 Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
Apr 05 Javascript
详解webpack 多页面/入口支持&公共组件单独打包
Jun 29 Javascript
微信小程序支付之c#后台实现方法
Oct 19 Javascript
对Vue table 动态表格td可编辑的方法详解
Aug 28 Javascript
Seajs源码详解分析
Apr 02 Javascript
Node.js事件的正确使用方法
Apr 05 Javascript
详解如何在Vue项目中导出Excel
Apr 19 Javascript
layer更改皮肤的实现方法
Sep 11 Javascript
electron踩坑之remote of undefined的解决
Oct 06 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模拟post提交数据的方法
2015/02/12 PHP
PHP下载远程图片并保存到本地方法总结
2016/01/22 PHP
PHP is_array() 检测变量是否是数组的实现方法
2016/06/13 PHP
PHP堆栈调试操作简单示例
2018/06/15 PHP
javascript截取字符串(通过substring实现并支持中英文混合)
2013/06/24 Javascript
jQuery 属性选择器element[herf*='value']使用示例
2013/10/20 Javascript
Jquery倒计时源码分享
2014/05/16 Javascript
详解JavaScript中getFullYear()方法的使用
2015/06/10 Javascript
Jquery attr()方法 属性赋值和属性获取详解
2016/04/15 Javascript
JS中用childNodes获取子元素换行会产生一个子元素
2016/12/08 Javascript
weex slider实现滑动底部导航功能
2017/08/28 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
2018/02/03 Javascript
Koa 使用小技巧(小结)
2018/10/22 Javascript
javascript动态创建对象的属性详解
2018/11/07 Javascript
使用vuex解决刷新页面state数据消失的问题记录
2019/05/08 Javascript
React优化子组件render的使用
2019/05/12 Javascript
原生js实现的移动端可拖动进度条插件功能详解
2019/08/15 Javascript
JS关闭子窗口并且刷新上一个窗口的实现示例
2020/03/10 Javascript
JavaScript 闭包的使用场景
2020/09/17 Javascript
[01:08:56]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第一场 2月7日
2021/03/11 DOTA
Python生成随机验证码的两种方法
2015/12/22 Python
Selenium定位元素操作示例
2018/08/10 Python
Pyinstaller打包.py生成.exe的方法和报错总结
2019/04/02 Python
python使用 __init__初始化操作简单示例
2019/09/26 Python
css3 clip实现圆环进度条的示例代码
2018/02/07 HTML / CSS
美国宠物美容和宠物用品购物网站:Cherrybrook
2018/12/07 全球购物
SQL注入攻击的种类有哪些
2013/12/30 面试题
90后毕业生的求职信范文
2013/09/21 职场文书
大学生学习自我评价
2014/01/13 职场文书
大跃进口号
2014/06/16 职场文书
八项规定整改方案
2014/10/01 职场文书
自主招生专家推荐信
2015/03/26 职场文书
机器人瓦力观后感
2015/06/12 职场文书
2015年国庆放假通知范文
2015/08/18 职场文书
Python OpenCV超详细讲解读取图像视频和网络摄像头
2022/04/02 Python
vue3语法糖内的defineProps及defineEmits
2022/04/14 Vue.js