• 欢迎访问马东东的博客,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

URI编码解码和base64

前端基础 马 东东 来源:博客园 9个月前 (01-14) 353次浏览 3个评论 扫描二维码
文章目录[隐藏]

阅读目录

概述

对于uri的编解码,在js中有3对函数,分别是escape/unescape,encodeURI/decodeURI,encodeURIComponent/decodeURIComponent。

它们的适用范围不同,而且遵循的编码规范也不同。

对于上述函数而言,所有的ASCII的字符编码相同,采用%XX的形式。而对于unicode字符,escape编码形式为%uXXXX,而其余两个函数则先将unicode字符按照utf-8对其进行编码,然后继续进行uri编码(百分号)。对于中文字符,每个字符用urf-8编码则为3个字节,然后在每个字节前面加上%即可。如:‘中国’按照urf-8编码为”0xE40xB80xAD0xE50x9B0xBD”,进而对该6个字节进行百分号编码:”%E4%B8%AD%E5%9B%BD”。

 对于base64编码,常常在网络中用于编码长标识符。编码规则是每3个8位字节为一组,分成4组6位字节,并且每个字节的高位补零,形成4个8位的字节。base64编码具有可逆性。在js中,IE10以及w3c浏览器内置了window.btoa()来完成二进制数据或者ASCII字符到base64的转换。但是unicode字符不能使用该函数。

区别

这三对函数的安全字符(即不需要编码的字符)范围也不同,如下所示:

  • escape(69个):*/@+-._0-9a-zA-Z
  • encodeURI(82个):!#$&'()*+,/:;=?@-._~0-9a-zA-Z
  • encodeURIComponent(71个):!'()*-._~0-9a-zA-Z

现在对比encodeURI和encodeURIComponent,从名称上可看出encodeURI是针对整个URI进行编码,我们以特殊的URI–URL来说明下。

对于URL为http://www.baidu.com而言,如果用encodeURI编码,返回的仍是“http://www.baidu.com”;如果用encodeURIComponent编码,返回的为”http%3A%2F%2Fwww.baidu.com”。

encodeURI所针对的是整个URI,并不会对分隔符如/,?,=符号进行编码,否则破坏了URI的原有含义,而encodeURIComponent则是针对URI的

某一部分进行编码,如查询字符串部分的&会被转义。

base64编码与btoa

在浏览器内部,encodeURIComponent(s) = escape(unicodeToUTF8(s));

根据上述公式,可以推出 unicodeToUTF8(s) = unescape(encodeURIComponent(s));然后根据utf-8编码的字符进行base64编码。

  function unicodeToBase64(s){

    return window.btoa(unescape(encodeURIComponent(s)))

  }


版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明文章地址:https://www.madongdong.me/technology/front-end-development/front-end-base/2019/01/15/1375/mdd/
喜欢 (0)
[821300079@qq.com]
分享 (0)
马 东东
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到
(3)个小伙伴在吐槽
  1. An impressive share, I just given this onto a colleague who was doing a bit analysis on this. And he in reality bought me breakfast as a result of I discovered it for him.. smile. So let me reword that: Thnx for the treat! But yeah Thnkx for spending the time to discuss this, I feel strongly about it and love reading extra on this topic. If possible, as you develop into expertise, would you mind updating your weblog with extra details? It's highly useful for me. Large thumb up for this blog post!
    匿名2019-01-28 13:18 回复 Windows 10 | Chrome 62.0.3202.94
    • 马 东东
      Thank you for your comments and welcome to my website.
      马 东东2019-02-03 21:24 回复 Windows 10 | Chrome 63.0.3239.132
  2. 马 东东
    签到成功!签到时间:2019-01-15 01:31:56,每日打卡,生活更精彩哦~
    马 东东2019-01-15 01:32 回复 Windows 10 | Chrome 63.0.3239.132