神刀安全网

在Web前端还可以这样实现Base64

相关文章:
一步到位 Base64 编码
Base64 之 JavaScript 实现

上面的相关文章中有一篇Base64 之 JavaScript 实现,本篇与之虽有异曲同工之妙,但它们是两种完全不同的实现方式。本篇在讲解上更优,因为对基础知识讲的更细致,分析更透彻。

btoa 和 atob

btoa 方法

btoa 是 Binary To ASCII 的简写,意思就是把二进制数据编码转换成Base64编码的ASCII字符串。且btoa(str) 方法是浏览器中的一个全局(顶级)方法。

atob 方法

btoa 相反 atob 是 ASCII To Binary 的简写,意思是把Base64格式的ASCII字符串进行Base64解码,得到原数据。atob 正是 btoa 方法的逆过程,并且它也是浏览器中的一个全局(顶级)方法。

万事大吉?

使用浏览器下原生的 JavaScript 方法(btoaatob)已经完全可以做到对字符串和二进制数据进行Base64的编码与解码;看到这里是不是觉得这一篇文章可以收尾了?其实这才刚刚开始!原理是因为给 btoa 传递一个中文字符串作为参数时,会出现如下代码段所示的错误。

> btoa("我是仵士杰"); < VM197:1 Uncaught DOMException: Failed to execute 'btoa' on 'Window':  The string to be encoded contains characters outside of the Latin1 range.(…)

为什么会报错呢?

The string to be encoded contains characters outside of the Latin1 range.
被编码的字符串包含Latin1范围以外的字符。

Latin1 是什么东西?

ISO/IEC8859-1,又称Latin-1或“西欧语言”,是国际标准化组织内ISO/IEC 8859的第一个8位字符集。以ASCII为基础,在空置的0xA0-0xFF的范围内,加入96个字母及符号,藉以供使用变音符号的拉丁字母语言使用。

看明白了吧,其实btoa只能转换占一个字节宽度的字符,就是Latin1字符集(它是ASCII的超集)。而中文汉字是被编码成占两个或以上个字节的。所以btoa方法无法对中文进行操作,于是就报了上面看到的错误。

曲线救国第一步

曲线救国的第一步我们先来介绍一下encodeURI、encodeURIComponent、decodeURI 和 decodeURIComponent这四个方法。它们是对字符串进行URI编码和解码的,也称之为转义。下面分别对他们进行介绍。

encodeURI 方法

下面是引用了w3cshool网站上对 encodeURI 方法的介绍

该方法不会对 ASCII 字母和数字进行编码,也不会对这些 ASCII 标点符号进行编码: – _ . ! ~ * ‘ ( ) 。
该方法的目的是对 URI 进行完整的编码,因此对以下在 URI 中具有特殊含义的 ASCII 标点符号,encodeURI() 函数是不会进行转义的:;/?:@&=+$,#

除上述介绍中明确说明不会被转义的字符外,URI中所有其他字符(如中文字符等)都会被转义。请看下面的代码段:

> encodeURI("http://www.ibestcode.com/?name=仵士杰"); < "http://www.ibestcode.com/?name=%E4%BB%B5%E5%A3%AB%E6%9D%B0"

encodeURIComponent 方法

还是引用w3cshool网站上对上的介绍

该方法不会对 ASCII 字母和数字进行编码,也不会对这些 ASCII 标点符号进行编码: – _ . ! ~ * ‘ ( ) 。
其他字符(比如 :;/?:@&=+$,# 这些用于分隔 URI 组件的标点符号),都是由一个或多个十六进制的转义序列替换的。

除上述介绍中明确说明不会被转义的字符外,URI中所有其他字符(如中文字符和ASCII的“;/?:@&=+$,# ”等)都会被转义。请看下面的代码段:

> encodeURIComponent("http://www.ibestcode.com/?name=仵士杰"); < "http%3A%2F%2Fwww.ibestcode.com%2F%3Fname%3D%E4%BB%B5%E5%A3%AB%E6%9D%B0"

通过比较我们会发现 encodeURIComponent 与 encodeURI 相比,多转换了在URI中具有特殊含义的字符:“;/?:@&=+$,#”。

decodeURI 和 decodeURIComponent

通过名字我们就能知道 decodeURIencodeURI的逆过程,而 decodeURIComponentencodeURIComponent 的逆过程,在这里就不多做介绍了,请看下面的代码段;

> decodeURI("http://www.ibestcode.com/?name=%E4%BB%B5%E5%A3%AB%E6%9D%B0"); < "http://www.ibestcode.com/?name=仵士杰"  > decodeURI("http%3A%2F%2Fwww.ibestcode.com%2F%3Fname%3D%E4%BB%B5%E5%A3%AB%E6%9D%B0"); < "http%3A%2F%2Fwww.ibestcode.com%2F%3Fname%3D仵士杰"  > decodeURIComponent("http%3A%2F%2Fwww.ibestcode.com%2F%3Fname%3D%E4%BB%B5%E5%A3%AB%E6%9D%B0"); < "http://www.ibestcode.com/?name=仵士杰"  > decodeURIComponent("http://www.ibestcode.com/?name=%E4%BB%B5%E5%A3%AB%E6%9D%B0"); < "http://www.ibestcode.com/?name=仵士杰"

转义规则

从上面几段代码中大家应该已经发现,字符串“仵士杰”转义之后对应的是“%E4%BB%B5%E5%A3%AB%E6%9D%B0”;字符“://”转义后对应的是“%3A%2F%2F”;其实转义的规则是把字符的utf-8编码以十六进制显示,并在每个字节(8bits=2个十六进制位)前加字符‘%’。有兴趣的同学可以亲自去验证一下。

小结一下

btoa 方法的参数中不能有中文,而encodeURIencodeURIComponent 都可以对中文进行转义,并且转义后的所有字符都是ASCII码字符。如此用encodeURIencodeURIComponent转义后的字符串再用btoa函数操作是不是就可以了呢?当然这样做是不会报错了,但最终得到的字符串适用性不强,因为这不是单纯的Base64编码,而是先进行encodeURI转义后再进行Base64编码的结果。如果要得到原来的字符串,还是需要先进行Base64解码,再进行decodeURI解码两步操作才行的。

柳暗花明 escape 和 unescape

escape 方法

同样引用W3CSchool上面的介绍

该方法不会对 ASCII 字母和数字进行编码,也不会对下面这些 ASCII 标点符号进行编码: * @ – _ + . / 。其他所有的字符都会被转义序列替换。

escape 方法接受一个字符串(是字符串,不是二进制串),他会根据字符编码占用的字节数不同而使用不同的方式显示编码。看下面的例子:

> escape(":%?") < "%3A%25%3F" > escape("仵士杰") < "%u4EF5%u58EB%u6770"

看出什么门道没?没看明白也没关系,下面我来解释一下:
其实 escape 的眼里所有字符都是Unicode编码的, 如果遇到的字符Unicode编码只占一个字节(其实就是Latin1字符集部分,[在这里说明一下,Unicode 字符集是 Latin1字符集的超集]),就以 “%”+Unicode编码值的十六进制表示来编码。如“:”被编码成“%3A”。如果遇到的字符Unicode编码占两个字节,就以”%u”+Unicode编码的十六进制表示来编码。如“仵”被编码成“%u4EF5”,有兴趣的同学可以亲自去查Unicode编码表来验证。关于占三四个字节的情况在此就不在讨论了,有兴趣的同学可以自己去深挖一下,挖出宝贝记得要跟我分享啊,哈哈……。

unescape 方法

unescape 方法执行的操作正是 escape 方法的逆过程,他会把所有“%XX”(XX是两位十六进制值)转换到Unicode中一字节能表示的部分(其实就是Latin1字符集中的字符)。unescape 函数是一个顶级 JavaScript 函数,并不与任何对象关联。

气满放大招

综合以上所述,我们可以清楚的知道,encodeURI 和 encodeURIComponent 会把汉字等转换成UTF-8编码后对每个字节进行转义得到类似”%XX”(XX是两位十六进制值)的串。而unescape 可以把所有 “%XX”(XX是两位十六进制值)的串,解码到Latin1字符集上。btoa 方法正好能够操作Latin1字符集上的字符转换成Base64编码。于是乎以下代码段产生了:

function utf8ToBase64(str){   return btoa(unescape(encodeURIComponent(str))); }

而解码过程是编辑过程的逆过程,于是得到如下代码

function base64ToUtf8(str){   return decodeURIComponent(escape(atob(str))); }

如果要像之前发的文章Base64 之 JavaScript 实现写的那样,封装成一个Base64对象,就可以得到如下代码了:

!function(W){   W.Base64 = {      utf8ToBase64:function (str){        return btoa(unescape(encodeURIComponent(str)));      },      base64ToUtf8: function(str){         return decodeURIComponent(escape(atob(str)));       }   } }(window);  //下面是测试结果  > Base64.utf8ToBase64("仵士杰") < "5Lu15aOr5p2w"  > Base64.base64ToUtf8("5Lu15aOr5p2w") < "仵士杰"

打完收功!

相关文章

一步到位 Base64 编码
Base64 之 JavaScript 实现

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » 在Web前端还可以这样实现Base64

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址