js之encodeURI、encodeURIComponent、decodeURI、decodeURIComponent

 更新时间:2023年04月17日 08:48:52   作者:Newbie_小白  
这篇文章主要介绍了js之encodeURI、encodeURIComponent、decodeURI、decodeURIComponent的使用,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

encodeURI、encodeURIComponent、decodeURI、decodeURIComponent

js 对文字进行编码涉及2个函数:encodeURI,encodeURIComponent,相应2个解码函数:decodeURI,decodeURIComponent

用来编码和解码URI的

统一资源标识符,或叫做 URI,是用来标识互联网上的资源(例如,网页或文件)和怎样访问这些资源的传输协议(例如,HTTP 或 FTP)的字符串。

encodeURI 和 decodeURI 函数操作的是完整的 URI;这俩函数的URI 中的任何保留字符都有特殊意义,所有不会编码它们。

encodeURI主要用于直接赋值给地址栏时候:

location.href=encodeURI("http://www.cnblogs.com/Tezml/");

encodeURIComponent 和 decodeURIComponent 函数操作的是组成 URI 的个别组件;encodeURIComponent 的作用:将文本字符串编码为一个有效的统一资源标识符 (URI)。这俩函数假定任何保留字符都代表普通文本,所以必须编码它们,所以它们(保留字符)出现在一个完整 URI 的组件里面时不会被解释成保留字符了。

 原因:如果 username = 'a&foo=boo' 而不用 encodeURIComponent 的话,整个参数就成了 name=a&foo=boo, 这样 CGI 就获得两个参数 name 和 foo. 这不是我们想要的。

Javascript 里还有个同样功能的函数 encodeURI, 但是此方法不会对下列字符进行编码:":"、"/"、";" 和 "?"。

传递参数时需要使用encodeURIComponent

这样组合的url才不会被#等特殊字符截断。

例如:

<script language="javascript">document.write('<a href="http://passport.baidu.com/?logout&aid=7& u='+encodeURIComponent(" rel="external nofollow"  rel="external nofollow" http://cang.baidu.com/bruce42")+'">退出</a& gt;');</script>
<script language="javascript">document.write('<a href="http://passport.baidu.com/?logout&aid=7& u='+encodeURIComponent(" rel="external nofollow"  rel="external nofollow" http://cang.baidu.com/bruce42")+'">退出</a& gt;');</script>

decodeURI()和decodeURIComponent()这两个函数可以对特定函数生成的密码字符串进行解密操作,就可以生成为未解密的字符串,比较实用,

decodeURI()定义和用法

decodeURI() 函数可对 encodeURI() 函数编码过的URI 进行解码。

语法:decodeURI(URIstring)

参数 描述:URIstring 必需。一个字符串,含有要解码的 URI 或其他要解码的文本。

返回值:URIstring 的副本,其中的十六进制转义序列将被它们表示的字符替换。

decodeURIComponent()定义和用法

decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码。

语法:decodeURIComponent(URIstring)

参数 描述:URIstring 必需。一个字符串,含有编码 URI 组件或其他要解码的文本。

返回值:URIstring 的副本,其中的十六进制转义序列将被它们表示的字符替换。

URL传参中的字符加密及解码方式

encodeURI/decodeURI、encodeURIComponent/decodeURIComponent 这四个方法的用处

都是用来编码和解码URI的。

encodedURI

函数通过将特定字符的每个实例替换为一个、两个、三或四转义序列来对统一资源标识符 (URI) 进行编码 (该字符的 UTF-8 编码仅为四转义序列)由两个 "代理" 字符组成)。encodeURI 自身无法产生能适用于HTTP GET 或 POST 请求的URI,例如对于 XMLHTTPRequests, 因为 "&", "+", 和 "=" 不会被编码,然而在 GET 和 POST 请求中它们是特殊字符。然而encodeURIComponent这个方法会对这些字符编码。

decodeURI

函数解码一个由encodeURI 先前创建的统一资源标识符(URI)或类似的例程。

encodeURIComponent

是对统一资源标识符(URI)的组成部分进行编码的方法。它使用一到四个转义序列来表示字符串中的每个字符的UTF-8编码(只有由两个Unicode代理区字符组成的字符才用四个转义字符编码)。转义除了字母、数字、(、)、.、!、~、*、'、-和_之外的所有

decodeURIComponent

方法用于解码由 encodeURIComponent 方法或者其它类似方法编码的部分统一资源标识符(URI)。

若解码字符串包含%,则会报错

原因如下: 

escape/unescape函数对字符串进行编码。

此函数使字符串具有可移植性,这样它就可以通过任何网络传输到任何支持 ASCII 字符的计算机。

此函数对特殊字符进行编码,但以下字符除外: * @ - _ + . /

心得:

当你需要转码/解码的URL是需要一个完整、可直接访问的URL时,应该使用encodeURI/decodeURI; 当你需要转码/解码的URL是作为链接的一部分,比如用作参数的情况,应该使用encodeURIComponent/decodeURIComponent,针对用encodeURIComponent/decodeURIComponent时解析‘%’报错推荐使用escape/unescape函数可以避免页面报错

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Javascript设计模式之观察者模式(推荐)

    Javascript设计模式之观察者模式(推荐)

    观察者模式有时也称为发布--订阅模式,在观察者模式中,有一个观察者可以管理所有的目标,等到有状态发生改变的时候发出通知
    2016-03-03
  • 解决微信内置浏览器返回上一页强制刷新问题方法

    解决微信内置浏览器返回上一页强制刷新问题方法

    微信内置浏览器在返回上一页面,且上一页面包含AJAX代码时,页面就会被强制刷新,极度影响用户体验。而我们想要的效果是:返回上一页面时,页面还停留在原来的状态,AJAX获取到的数据还在,滚动条也在原来的位置。下面跟着小编一起来看下吧
    2017-02-02
  • 简单实现js倒计时功能

    简单实现js倒计时功能

    这篇文章主要为大家详细介绍了js倒计时效果的实现代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • js使用正则表达式对身份证号的判断

    js使用正则表达式对身份证号的判断

    这篇文章主要给大家介绍了关于js使用正则表达式对身份证号的判断的相关资料,在用户注册页面有些需求要求的比较严格,需要对身份证验证是否合法,通过此功能严格此系统软件,从而过滤到很多,需要的朋友可以参考下
    2023-08-08
  • JS中模糊查询功能的一些常用方法

    JS中模糊查询功能的一些常用方法

    在前端开发中,模糊查询与下拉匹配是提高用户体验的重要功能,特别是在搜索功能上,这篇文章主要给大家介绍了关于JS中模糊查询功能的一些常用方法,需要的朋友可以参考下
    2024-06-06
  • JavaScript词法作用域与调用对象深入理解

    JavaScript词法作用域与调用对象深入理解

    关于 Javascript 的函数作用域、调用对象和闭包之间的关系很微妙,关于它们的文章已经有很多,本文做了一些总结,需要的朋友可以参考下
    2012-11-11
  • JavaScript实现飞舞的泡泡效果

    JavaScript实现飞舞的泡泡效果

    这篇文章主要为大家详细介绍了JavaScript实现飞舞的泡泡效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-02-02
  • Iframe thickbox2.0使用的方法

    Iframe thickbox2.0使用的方法

    一个小项目中用到,奉命进行修改,定位到
    2009-03-03
  • 小程序封装wx.request请求并创建接口管理文件的实现

    小程序封装wx.request请求并创建接口管理文件的实现

    这篇文章主要介绍了小程序封装wx.request请求并创建接口管理文件
    2019-04-04
  • 深入学习js函数的隐式参数 arguments 和 this

    深入学习js函数的隐式参数 arguments 和 this

    这篇文章主要介绍了 深入学习js函数的隐式参数 arguments 和 this,arguments是一个类数组结构,它保存了调用时传递给函数的所有实参;this是函数执行时的上下文对象, 这个对象有些让人感到困惑的行为。 下面分别对他们进行讨论。,需要的朋友可以参考下
    2019-06-06

最新评论