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 避免闭包引发的问题
Mar 17 Javascript
9个javascript语法高亮插件 推荐
Jul 18 Javascript
原生js 秒表实现代码
Jul 24 Javascript
浅析jQuery1.8的几个小变化
Dec 10 Javascript
JavaScript通过prototype给对象定义属性用法实例
Mar 23 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
Aug 11 Javascript
js中最容易被忽视的事件问题大总结
May 15 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
Jun 17 Javascript
prototype与__proto__区别详细介绍
Jan 09 Javascript
简述vue中的config配置
Jan 23 Javascript
vue实现前进刷新后退不刷新效果
Jan 26 Javascript
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
Nov 12 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
延长phpmyadmin登录时间的方法
2011/02/06 PHP
php定时计划任务与fsockopen持续进程实例
2014/05/23 PHP
php内存缓存实现方法
2015/01/24 PHP
动态调用css文件——jquery的应用
2007/02/20 Javascript
JavaScript 创建对象
2009/07/17 Javascript
Jquery ui css framework
2010/06/28 Javascript
prettify 代码高亮着色器google出品
2010/12/28 Javascript
Ajax异步提交表单数据的说明及方法实例
2013/06/22 Javascript
javascript特殊日历控件分享
2016/03/07 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
2017/03/30 Javascript
vue-hook-form使用详解
2017/04/07 Javascript
微信小程序图片轮播组件gallery slider使用方法详解
2018/01/31 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
2018/04/03 Javascript
微信小程序上传图片功能(附后端代码)
2020/06/19 Javascript
浅谈vue父子组件怎么传值
2018/07/21 Javascript
node.js使用redis储存session的方法
2018/09/26 Javascript
vue路由跳转传参数的方法
2019/05/06 Javascript
js实现小时钟效果
2020/03/25 Javascript
部署vue+Springboot前后端分离项目的步骤实现
2020/05/31 Javascript
Vue组件为什么data必须是一个函数
2020/06/11 Javascript
Python中使用 Selenium 实现网页截图实例
2014/07/18 Python
python中Flask框架简单入门实例
2015/03/21 Python
Python图像处理之识别图像中的文字(实例讲解)
2018/05/10 Python
Windows下Anaconda2安装NLTK教程
2018/09/19 Python
kafka-python批量发送数据的实例
2018/12/27 Python
基于python实现的百度音乐下载器python pyqt改进版(附代码)
2019/08/05 Python
python实现二分类和多分类的ROC曲线教程
2020/06/15 Python
小饰品店的创业计划书范文
2013/12/28 职场文书
大学毕业生求职自荐书
2014/06/05 职场文书
2013年最新自荐信范文
2014/06/23 职场文书
招标授权委托书样本
2014/09/23 职场文书
2014最新股权信托合同协议书
2014/11/18 职场文书
2016幼儿园中班开学寄语
2015/12/03 职场文书
电力企业职工培训心得体会
2016/01/11 职场文书
JS不要再到处使用绝对等于运算符了
2021/04/30 Javascript
Python docx库删除复制paragraph及行高设置图片插入示例
2022/07/23 Python