脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → encodeURI和encodeURIComponent以及escape

谈谈encodeURI和encodeURIComponent以及escape的区别与应用

 更新时间：2015年11月24日 14:16:22   作者：trzml_黄兆楠  
encodeURI和encodeURIComponent以及escape，这三个都是用来编码的，本篇文章给大家介绍encodeURI和encodeURIComponent以及escape的区别与应用，感兴趣的朋友一起学习吧

首先，我们都知道这三个东西都是用来编码的先来说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()

您可能感兴趣的文章:

相关文章

  • JS实现点击登录弹出窗口同时背景色渐变动画效果

    JS实现点击登录弹出窗口同时背景色渐变动画效果

    这篇文章主要介绍了JS实现点击登录弹出窗口同时背景色渐变动画效果,涉及JavaScript基于鼠标事件及时间函数定时触发形成渐变动画的相关技巧,需要的朋友可以参考下
    2016-03-03
  • Electron实现右键保存图片到本地功能

    Electron实现右键保存图片到本地功能

    Electron是开发跨平台pc客户端的利器,最近在使用它时遇到一个需要右键保存页面中图片的功能,Electron虽使用了Chromium内核但却无法直接使用系统右键,需要自定义右键菜单,然后添加图片保存功能,以下是我的使用方法,需要的朋友可以参考下
    2024-07-07
  • element-ui的表单验证清除校验提示语的解决方案

    element-ui的表单验证清除校验提示语的解决方案

    对表单域中的数据进行校验的时候,其中有一项比较特殊,不是简单的输入框,下拉框这些表单元素,而是自己写的一个el-table的选择弹窗,本文给大家介绍element-ui的表单验证如何清除校验提示语,感兴趣的朋友一起看看吧
    2024-01-01
  • 微信小程序页面调用自定义组件内的事件详解

    微信小程序页面调用自定义组件内的事件详解

    这篇文章主要介绍了微信小程序页面调用自定义组件内的事件详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • JS合并两个数组的3种方法详解

    JS合并两个数组的3种方法详解

    这篇文章主要介绍了JS合并两个数组的3种方法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-10-10
  • IE之动态添加DOM节点触发window.resize事件

    IE之动态添加DOM节点触发window.resize事件

    因为页面很多UI是绝对定位的,所以当窗口大小改变的时候会使原先的布局混乱,只好在每次window.resize的时候重新布局...
    2010-07-07
  • js如何使用Pagination+PageHelper实现分页

    js如何使用Pagination+PageHelper实现分页

    本文主要介绍了js如何使用Pagination+PageHelper实现分页，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • 不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术

    不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术

    注明:以下方法都经过实例和开发的长期验证,其实这些技术早就有,今天只不过自己归纳一下
    2008-09-09
  • 微信小程序数字滚动插件使用详解

    微信小程序数字滚动插件使用详解

    这篇文章主要介绍了微信小程序数字滚动插件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-02-02
  • EasyUI的DataGrid绑定Json数据源的示例代码

    EasyUI的DataGrid绑定Json数据源的示例代码

    本篇文章主要介绍了EasyUI的DataGrid绑定Json数据源的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12

最新评论