谈谈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 相关文章推荐
mysql输出数据赋给js变量报unterminated string literal错误原因
May 22 Javascript
修复ie8&amp;chrome下window的resize事件多次执行
Oct 20 Javascript
JavaScript内核之基本概念
Oct 21 Javascript
早该知道的7个JavaScript技巧
Mar 27 Javascript
JavaScript关于提高网站性能的几点建议(一)
Jul 24 Javascript
详解webpack介绍&amp;安装&amp;常用命令
Jun 29 Javascript
VUE axios发送跨域请求需要注意的问题
Jul 06 Javascript
bootstrap confirmation按钮提示组件使用详解
Aug 22 Javascript
vue-infinite-loading2.0 中文文档详解
Apr 08 Javascript
原生JS实现DOM加载完成马上执行JS代码的方法
Sep 07 Javascript
JS对象属性的检测与获取操作实例分析
Mar 17 Javascript
jQuery cookie的公共方法封装和使用示例
Jun 01 jQuery
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
Server.HTMLEncode让代码在页面里显示为源代码
2013/12/08 PHP
mysql desc(DESCRIBE)命令实例讲解
2016/09/24 PHP
PHP使用JpGraph绘制折线图操作示例【附源码下载】
2019/10/18 PHP
javascript静态的url如何传递
2007/05/03 Javascript
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
2009/11/24 Javascript
JS高级笔记
2011/07/13 Javascript
jQuery滚动加载图片效果的实现
2013/03/06 Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
2013/06/21 Javascript
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
2013/12/05 Javascript
js函数参数设置默认值的一种变通实现方法
2014/05/26 Javascript
jQuery实现鼠标划过展示大图的方法
2015/03/09 Javascript
轻松学习Javascript闭包函数
2015/12/15 Javascript
JavaScript编程学习技巧汇总
2016/02/21 Javascript
JavaScript设计模式经典之工厂模式
2016/02/24 Javascript
jquery跟随屏幕滚动效果的实现代码
2016/04/13 Javascript
详解Vue使用命令行搭建单页面应用
2017/05/24 Javascript
vue中七牛插件使用的实例代码
2017/07/28 Javascript
详解vue引入子组件方法
2019/02/12 Javascript
深入Node TCP模块的理解
2019/03/13 Javascript
Vue axios 跨域请求无法带上cookie的解决
2020/09/08 Javascript
python实现排序算法
2014/02/14 Python
Python通过调用mysql存储过程实现更新数据功能示例
2018/04/03 Python
python3+PyQt5使用数据库窗口视图
2018/04/24 Python
Python同步遍历多个列表的示例
2019/02/19 Python
Django 表单模型选择框如何使用分组
2019/05/16 Python
django框架实现一次性上传多个文件功能示例【批量上传】
2019/06/19 Python
详解python深浅拷贝区别
2019/06/24 Python
twilio python自动拨打电话,播放自定义mp3音频的方法
2019/08/08 Python
python 实用工具状态机transitions
2020/11/21 Python
利用Storage Event实现页面间通信的示例代码
2018/07/26 HTML / CSS
Footshop乌克兰:运动鞋的最大选择
2019/12/01 全球购物
干部作风整顿个人剖析材料
2014/10/06 职场文书
2014年学生会主席工作总结
2014/11/07 职场文书
暑期实践个人总结
2015/03/06 职场文书
销区经理年终述职报告模板
2019/11/28 职场文书
Python中字符串对象语法分享
2022/02/24 Python