谈谈encodeURI和encodeURIComponent以及escape的区别与应用


Posted in Javascript onNovember 24, 2015

首先,我们都知道这三个东西都是用来编码的先来说encodeURI()和encodeURIComponent(),这两个是在转换url时候用来编码解码用的。

有编码就会有解码,解码就是decodeURI()和decodeURIComponent(),他们的用法很简单,在参数中带入要转码的文字就可实现目的

如:

encodeURI("我是要编码的文字")

decodeURI("我是要解码的文字")

encodeURIComponent("我是要编码的文字")

decodeURIComponent("我是要解码的文字")

而encodeURI()和encodeURIComponent()的区别其实并不大

主要区别在于:

encodeURI不编码字符有82个:!,#,$,&,',(,),*,+,,,-,.,/,:,;,=,?,@,_,~,0-9,a-z,A-Z

encodeURIComponent不编码字符有71个:!, ',(,),*,-,.,_,~,0-9,a-z,A-Z

encodeURI主要用于直接赋值给地址栏时候:

location.href=encodeURI("http://www.cnblogs.com/Tezml/");

而encodeURIComponent主要用于url的query参数:

location.href="http://www.cnblogs.com/Tezml/test.php?a="+encodeURIComponent("我就是我"); 

而escape,相比于上面那两个,就有所不同了

escape()是编码,unescape()是解码

escape 方法

对 String 对象编码以便它们能在所有计算机上可读,

escape(charString)

必选项 charstring 参数是要编码的任意 String 对象或文字。

说明

escape 方法返回一个包含了 charstring 内容的字符串值( Unicode 格式)。所有空格、标点、重音符号以及其他非 ASCII 字符都用 %xx 编码代替,

其中 xx 等于表示该字符的十六进制数。例如,空格返回的是 "%20" 。

字符值大于 255 的以 %uxxxx 格式存储。

escape不编码字符有69个:*,+,-,.,/,@,_,0-9,a-z,A-Z

注意   escape 方法不能够用来对统一资源标示码 (URI) 进行编码。对其编码应使用 encodeURI 和encodeURIComponent 方法。

最后上一段关于编码解码的demo

<!DOCTYPE html>
<html>
 <head>
 <title>Tezml_编码解码测试</title>
 <meta charset="utf-8">
 <meta name="author" content="Tezml" />
 <meta name="copyright" content="Tezml" />
 <meta name="description" content="Tezml" />
 <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<div id="wz1"></div>
<div id="wz2"></div>
<div id="wz3"></div>
<div id="wz4"></div>
<div id="wz5"></div>
<div id="wz6"></div>
<div id="wz7"></div>
<div id="wz8"></div>
<div id="wz9"></div>
<div id="wz10"></div>
<div id="wz11"></div>
<div id="wz12"></div>
</body>
<script type="text/javascript">
var chinese="请叫我中文"
var english="place tall me englash"
var Monster=":#&$/@"
$("#wz1").html(encodeURI(chinese))//编码 %E8%AF%B7%E5%8F%AB%E6%88%91%E4%B8%AD%E6%96%87
$("#wz2").html(decodeURI(chinese))//解码 请叫我中文
$("#wz3").html(encodeURI(english))//编码 place%20tall%20me%20englash
$("#wz4").html(decodeURI(english))//解码 place tall me englash
$("#wz5").html(encodeURIComponent(Monster))//编码 %3A%23%26%24%2F%40
$("#wz6").html(encodeURI(Monster))//编码 :#&$/@
$("#wz7").html(escape(chinese))//编码 %u8BF7%u53EB%u6211%u4E2D%u6587
$("#wz8").html(escape(english))//编码 place%20tall%20me%20englash
$("#wz9").html(escape(Monster))//编码 %3A%23%26%24/@
$("#wz10").html(unescape(chinese))//编码 请叫我中文
$("#wz11").html(unescape(english))//编码 place tall me englash
$("#wz12").html(unescape(Monster))//编码 :#&$/@
</script>
</html>

总结

escape()不能直接用于URL编码,它的真正作用是返回一个字符的Unicode编码值。比如"春节"的返回结果是%u6625%u8282,,escape()不对"+"编码 主要用于汉字编码,现在已经不提倡使用。

encodeURI()是Javascript中真正用来对URL编码的函数。 编码整个url地址,但对特殊含义的符号"; / ? : @ & = + $ , #",也不进行编码。对应的解码函数是:decodeURI()。

encodeURIComponent() 能编码"; / ? : @ & = + $ , #"这些特殊字符。对应的解码函数是decodeURIComponent()。

假如要传递带&符号的网址,所以用encodeURIComponent()

Javascript 相关文章推荐
JavaScript 中的replace方法说明
Apr 13 Javascript
js中把JSON字符串转换成JSON对象最好的方法
Mar 21 Javascript
微信分享的标题、缩略图、连接及描述设置方法
Oct 14 Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
Jun 26 Javascript
微信小程序 跳转传递数据的实例
Jul 06 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
Oct 23 Javascript
vue路由传参三种基本方式详解
Dec 09 Javascript
javascript实现简易的计算器
Jan 17 Javascript
Node.js 在本地生成日志文件的方法
Feb 07 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
Jul 27 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
Sep 05 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
Oct 31 Javascript
javascript实现加载xml文件的方法
Nov 24 #Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
Nov 24 #Javascript
JavaScript转换与解析JSON方法实例详解
Nov 24 #Javascript
jQuery实现带分组数据的Table表头排序实例分析
Nov 24 #Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
Nov 24 #Javascript
JS获取数组最大值、最小值及长度的方法
Nov 24 #Javascript
基于jquery实现日历签到功能
Sep 11 #Javascript
You might like
德生PL660的电路分析和打磨
2021/03/02 无线电
2021年最新CPU天梯图
2021/03/04 数码科技
linux系统上支持php的 iconv()函数的方法
2011/10/01 PHP
php使用ICQ网关发送手机短信
2013/10/30 PHP
使用swoole扩展php websocket示例
2014/02/13 PHP
php的declare控制符和ticks教程(附示例)
2014/03/21 PHP
通过PHP简单实例介绍文件上传
2015/12/16 PHP
详解php协程知识点
2018/09/21 PHP
javascript支持firefox,ie7页面布局拖拽效果代码
2007/12/20 Javascript
JSON辅助格式化处理方法
2013/03/26 Javascript
简单js代码实现selece二级联动(推荐)
2014/02/18 Javascript
jQuery实现列表的全选功能
2015/03/18 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
2016/05/04 Javascript
jQuery基于ID调用指定iframe页面内的方法
2016/07/06 Javascript
JavaScript中清空数组的三种方式
2017/03/22 Javascript
js合并两个数组生成合并后的key:value数组
2018/05/09 Javascript
微信小程序实现动态获取元素宽高的方法分析
2018/12/10 Javascript
JS组件库AlloyTouch实现图片轮播过程解析
2020/05/29 Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
2020/09/02 Javascript
[03:06]2018年度CS GO最具人气解说-完美盛典
2018/12/16 DOTA
python操作日期和时间的方法
2014/03/11 Python
python多线程操作实例
2014/11/21 Python
Python 搭建Web站点之Web服务器网关接口
2016/11/06 Python
Python实现的中国剩余定理算法示例
2017/08/05 Python
python实现简单淘宝秒杀功能
2018/05/03 Python
python之文件读取一行一行的方法
2018/07/12 Python
python实现录音小程序
2020/10/26 Python
Python基于gevent实现高并发代码实例
2020/05/15 Python
新媒传信软件测试面试题
2013/02/24 面试题
《花木兰》教学反思
2014/04/09 职场文书
党的群众路线教育实践活动个人对照检查材料(医生)
2014/11/05 职场文书
社区元宵节活动总结
2015/02/06 职场文书
2016感恩母亲节校园广播稿
2015/12/17 职场文书
2016党员发展对象培训心得体会
2016/01/08 职场文书
Android在Sqlite3中的应用及多线程使用数据库的建议
2022/04/24 Java/Android
vue如何清除浏览器历史栈
2022/05/25 Vue.js