谈谈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 相关文章推荐
Dojo 学习笔记入门篇 First Dojo Example
Nov 15 Javascript
JavaScript包装对象使用介绍
Aug 29 Javascript
js查找某元素中的所有图片地址的方法
Jan 16 Javascript
JQuery异步加载无限下拉框级联功能实现示例
Feb 19 Javascript
JS实现仿京东淘宝竖排二级导航
Dec 08 Javascript
使用jquery动态加载js文件的方法
Dec 24 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
Sep 20 Javascript
js贪吃蛇游戏实现思路和源码
Apr 14 Javascript
JavaScript判断浏览器及其版本信息
Jan 20 Javascript
JS对象与json字符串相互转换实现方法示例
Jun 14 Javascript
vue 引用自定义ttf、otf、在线字体的方法
May 09 Javascript
Vue+tracking.js 实现前端人脸检测功能
Apr 16 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处理整数函数的详解
2013/06/09 PHP
ThinkPHP中__initialize()和类的构造函数__construct()用法分析
2014/11/29 PHP
php实现生成验证码实例分享
2016/04/10 PHP
利用location.hash实现跨域iframe自适应
2010/05/04 Javascript
Jquey拖拽控件Draggable使用方法(asp.net环境)
2010/09/28 Javascript
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
2012/06/20 Javascript
node.js中的querystring.unescape方法使用说明
2014/12/10 Javascript
详解jQuery中的事件
2016/12/14 Javascript
原生javascript实现的全屏滚动功能示例
2017/09/19 Javascript
webpack多页面开发实践
2017/12/18 Javascript
VSCode配置react开发环境的步骤
2017/12/27 Javascript
详解ES6中的三种异步解决方案
2018/06/28 Javascript
vue展示dicom文件医疗系统的实现代码
2018/08/27 Javascript
Linux中安装Python的交互式解释器IPython的教程
2016/06/13 Python
python做量化投资系列之比特币初始配置
2018/01/23 Python
Puppeteer使用示例详解
2019/06/20 Python
python如何删除文件中重复的字段
2019/07/16 Python
Python运行异常管理解决方案
2020/03/09 Python
python suds访问webservice服务实现
2020/06/26 Python
在Python3.74+PyCharm2020.1 x64中安装使用Kivy的详细教程
2020/08/07 Python
css3.0 图形构成实例练习一
2013/03/19 HTML / CSS
CSS3属性background-size使用指南
2014/12/09 HTML / CSS
美国休闲服装品牌:J.Crew Factory
2017/03/04 全球购物
新西兰领先的鞋类和靴子网上商城:Merchant 1948
2017/09/08 全球购物
潘多拉珠宝英国官方网上商店:PANDORA英国
2018/06/12 全球购物
乌克兰电子产品和家用电器购物网站:TOUCH
2019/08/09 全球购物
意大利中国电子产品购物网站:Geekmall.com
2019/09/30 全球购物
error和exception有什么区别
2012/10/02 面试题
办公室班子四风问题对照检查材料
2014/10/04 职场文书
党支部半年考察意见
2015/06/01 职场文书
单位病假条范文
2015/08/17 职场文书
CSS3 制作的书本翻页特效
2021/04/13 HTML / CSS
详解Java实践之建造者模式
2021/06/18 Java/Android
python获取对象信息的实例详解
2021/07/07 Python
java代码实现空间切割
2022/01/18 Java/Android
springboot用户数据修改的详细实现
2022/04/06 Java/Android