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

2023年5月29日 115次阅读 来源: JSON_NULL

相关文章：
一步到位 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 方法（btoa和atob）已经完全可以做到对字符串和二进制数据进行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

通过名字我们就能知道 decodeURI 是 encodeURI的逆过程，而 decodeURIComponent 是 encodeURIComponent 的逆过程，在这里就不多做介绍了，请看下面的代码段;

> 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 方法的参数中不能有中文，而encodeURI 和 encodeURIComponent 都可以对中文进行转义，并且转义后的所有字符都是ASCII码字符。如此用encodeURI 或 encodeURIComponent转义后的字符串再用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 实现

    原文作者：JSON_NULL
    原文地址: https://www.jianshu.com/p/b2c6dc5fad0a
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞