谈谈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 相关文章推荐
use jscript List Installed Software
Jun 11 Javascript
javascript 页面划词搜索JS
Sep 28 Javascript
JS获得选取checkbox整行数据的方法
Jan 28 Javascript
JS实现的随机排序功能算法示例
Jun 09 Javascript
AngularJS中的路由使用及实现代码
Oct 09 Javascript
vue服务端渲染缓存应用详解
Sep 12 Javascript
基于vue-cli npm run build之后vendor.js文件过大的解决方法
Sep 27 Javascript
vue中导出Excel表格的实现代码
Oct 18 Javascript
基于jquery实现九宫格拼图小游戏
Nov 30 jQuery
JS重学系列之聊聊new操作符
Mar 04 Javascript
js实现随机点名程序
Sep 17 Javascript
vue.js实现简单购物车功能
May 30 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 sybase_fetch_array使用方法
2014/04/15 PHP
PHP获取文件相对路径的方法
2015/02/26 PHP
PHP中file_put_contents追加和换行的实现方法
2017/04/01 PHP
PHP date()格式MySQL中插入datetime方法
2019/01/29 PHP
jquery json 实例代码
2010/12/02 Javascript
文本框水印提示效果的简单实现代码
2014/02/22 Javascript
jquery实现浮动的侧栏实例
2015/06/25 Javascript
jQuery鼠标事件汇总
2015/08/30 Javascript
jQuery代码实现对话框右上角菜单带关闭×
2016/05/03 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
2019/05/10 Javascript
微信小程序获取当前位置和城市名
2019/11/13 Javascript
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
2020/08/27 Javascript
利用python实现数据分析
2017/01/11 Python
python 读写中文json的实例详解
2017/10/29 Python
Python实现批量读取图片并存入mongodb数据库的方法示例
2018/04/02 Python
softmax及python实现过程解析
2019/09/30 Python
基于python模拟TCP3次握手连接及发送数据
2020/11/06 Python
python实现马丁策略回测3000只股票的实例代码
2021/01/22 Python
socket.io 和canvas 实现的共享画板功能
2019/05/22 HTML / CSS
美国眼镜网:GlassesUSA
2017/09/07 全球购物
荷兰牛仔裤网上商店:Jeans Centre
2018/04/03 全球购物
国际性能运动服装品牌:Dare 2b
2018/07/27 全球购物
德国汽车零件和汽车配件网上商店:kfzteile24
2018/11/14 全球购物
《槐乡五月》教学反思
2014/04/25 职场文书
学习演讲稿范文
2014/05/10 职场文书
ktv好的活动方案
2014/08/17 职场文书
乡镇平安建设汇报材料
2014/08/25 职场文书
感恩教师节演讲稿
2014/09/03 职场文书
借名购房协议书范本
2014/10/06 职场文书
2014党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
2014年消防工作总结
2014/11/21 职场文书
成本低的5个创业项目:投资小、赚钱快
2019/08/20 职场文书
MongoDB数据库的安装步骤
2021/06/18 MongoDB
Pytest中skip skipif跳过用例详解
2021/06/30 Python
使用Redis实现点赞取消点赞的详细代码
2022/03/20 Redis
Python中Matplotlib的点、线形状、颜色以及绘制散点图
2022/04/07 Python