谈谈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 相关文章推荐
jquery text()要注意啦
Oct 30 Javascript
JS仿百度搜索自动提示框匹配查询功能
Nov 21 Javascript
js限制checkbox选中个数以限制六个为例
Jul 15 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
Sep 15 Javascript
每天一篇javascript学习小结(面向对象编程)
Nov 20 Javascript
浅谈AngularJS中ng-class的使用方法
Nov 11 Javascript
Javascript Event(事件)的传播与冒泡
Jan 23 Javascript
javascript cookie的基本操作(添加和删除)
Jul 24 Javascript
使用Angular CLI进行Build(构建)和Serve详解
Mar 24 Javascript
详解微信小程序获取当前时间及日期的方法
Apr 28 Javascript
Node.js API详解之 querystring用法实例分析
Apr 29 Javascript
使用Vue.js和MJML创建响应式电子邮件
Mar 23 Vue.js
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调用三种数据库的方法(2)
2006/10/09 PHP
php中使用DOM类读取XML文件的实现代码
2011/12/14 PHP
php笔记之:AOP的应用
2013/04/24 PHP
Php无限级栏目分类读取的实现代码
2014/02/19 PHP
php判断字符串在另一个字符串位置的方法
2014/02/27 PHP
PHP如何解决微信文章图片防盗链
2020/12/09 PHP
js控制当再次点击按钮时的间隔时间
2014/06/03 Javascript
用户代理字符串userAgent可实现的四个识别
2015/09/20 Javascript
Node.js文件编码格式的转换的方法
2018/04/27 Javascript
vue中组件的过渡动画及实现代码
2018/11/21 Javascript
微信小程序如何再次获取用户授权的方法
2019/05/10 Javascript
[00:12]DAC2018 天才少年转战三号位,他的SOLO是否仍如昔日般强大?
2018/04/06 DOTA
学习python 之编写简单乘法运算题
2016/02/27 Python
只需7行Python代码玩转微信自动聊天
2019/01/27 Python
scrapy-redis的安装部署步骤讲解
2019/02/27 Python
Python下简易的单例模式详解
2019/04/08 Python
python selenium循环登陆网站的实现
2019/11/04 Python
Python二次规划和线性规划使用实例
2019/12/09 Python
JupyterNotebook 输出窗口的显示效果调整方法
2020/04/13 Python
Django微信小程序后台开发教程的实现
2020/06/03 Python
python 19个值得学习的编程技巧
2020/08/15 Python
python中@property的作用和getter setter的解释
2020/12/22 Python
iframe在移动端的缩放的示例代码
2018/10/12 HTML / CSS
英国性感内衣和睡衣品牌:Bluebella
2018/01/26 全球购物
We Fashion荷兰:一家国际时装公司
2018/04/18 全球购物
土耳其玩具商店:Toyzz Shop
2019/08/02 全球购物
路德维希•贝克(LUDWIG BECK)中文官网:德国大型美妆百货
2020/09/19 全球购物
退休感言
2014/01/28 职场文书
党员组织关系介绍信
2014/02/13 职场文书
《鱼游到了纸上》教学反思
2014/02/20 职场文书
大家访活动实施方案
2014/03/10 职场文书
雷人标语集锦
2014/06/19 职场文书
公司晚宴祝酒词
2015/08/11 职场文书
2016幼儿教师自荐信范文
2016/01/28 职场文书
Python基础之Socket通信原理
2021/04/22 Python
node.js使用express-fileupload中间件实现文件上传
2021/07/16 Javascript