谈谈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 相关文章推荐
xheditor与validate插件冲突的解决方案
Apr 15 Javascript
javascript学习笔记(十八) 获得页面中的元素代码
Jun 20 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
Dec 18 Javascript
详解Bootstrap按钮
Jan 04 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
Nov 30 Javascript
详解本地Node.js服务器作为api服务器的解决办法
Feb 28 Javascript
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
webpack搭建vue 项目的步骤
Dec 27 Javascript
微信小程序实现同一页面取值的方法分析
Apr 30 Javascript
在Vue mounted方法中使用data变量详解
Nov 05 Javascript
javascript中的with语句学习笔记及用法
Feb 17 Javascript
如何在selenium中使用js实现定位
Aug 18 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
在PHP的图形函数中显示汉字
2006/10/09 PHP
PHP date函数参数详解
2006/11/27 PHP
PHP资源管理框架Assetic简介
2014/06/12 PHP
php简单分页类实现方法
2015/02/26 PHP
推荐自用 Javascript 缩图函数 (onDOMLoaded)……
2007/10/23 Javascript
js的alert样式如何更改如背景颜色
2014/01/22 Javascript
深入探寻seajs的模块化与加载方式
2015/04/14 Javascript
JavaScript改变CSS样式的方法汇总
2015/05/07 Javascript
js获取元素的标签名实现方法
2016/10/08 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
2016/11/02 Javascript
JS中setTimeout和setInterval的最大延时值详解
2017/02/13 Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
2019/04/25 Javascript
Node.js API详解之 string_decoder用法实例分析
2020/04/29 Javascript
Windows平台Python连接sqlite3数据库的方法分析
2017/07/12 Python
python模块之time模块(实例讲解)
2017/09/13 Python
Python读取mat文件,并转为csv文件的实例
2018/07/04 Python
python 调用钉钉机器人的方法
2019/02/20 Python
python字符串判断密码强弱
2020/03/18 Python
Python3操作读写CSV文件使用包过程解析
2020/04/10 Python
如何基于Python和Flask编写Prometheus监控
2020/11/25 Python
python实现图像高斯金字塔的示例代码
2020/12/11 Python
CSS3 3D旋转rotate效果实例介绍
2016/05/03 HTML / CSS
英国健康和美容技术产品购物网站:CurrentBody
2019/07/17 全球购物
NICKIS.com荷兰:设计师儿童时装
2020/01/08 全球购物
shell变量的作用空间是什么
2013/08/17 面试题
教师节促销活动方案
2014/02/14 职场文书
汇源肾宝广告词
2014/03/20 职场文书
申论倡议书范文
2014/05/13 职场文书
工程售后服务承诺书
2014/05/21 职场文书
经营目标管理责任书
2014/07/25 职场文书
公司承诺函范文
2015/01/21 职场文书
家长意见书
2015/06/04 职场文书
2015年秋季校长开学典礼致辞
2015/07/29 职场文书
九九重阳节致辞
2015/07/31 职场文书
你会写报告?产品体验报告到底该怎么写?
2019/08/14 职场文书
JavaScript原型链中函数和对象的理解
2022/06/16 Javascript