原生js实现base64编码解码

来源：网络文章列表 2019-06-05 8

所谓 Base64 就是一种编码方法，可以将任意值转成 0～9、A～Z、a-z、+和/这64个字符组成的可打印字符。使用它的主要目的，不是为了加密，而是为了不出现特殊字符，简化程序的处理。

首先来让我们了解下啥是base64。

base64说明

Base64是网络上最常见的用于传输8Bit字节码的编码方式之一，Base64就是一种基于64个可打印字符来表示二进制数据的方法。可查看RFC2045～RFC2049，上面有MIME的详细规范。

所谓 Base64 就是一种编码方法，可以将任意值转成 0～9、A～Z、a-z、+和/这64个字符组成的可打印字符。使用它的主要目的，不是为了加密，而是为了不出现特殊字符，简化程序的处理。

常见的使用场景

1、有时，文本里面包含一些不可打印的符号，比如 ASCII 码0到31的符号都无法打印出来，这时可以使用 Base64 编码，将它们转成可以打印的字符。

2、有时需要以文本格式传递二进制数据，那么也可以使用 Base64 编码。

JavaScript 原生提供两个 Base64 相关的方法。

btoa()：任意值转为 Base64 编码
atob()：Base64 编码转为原来的值

Base64编码

语法（浏览器中）：

var encodedData = window.btoa(stringToEncode);

或者（浏览器或js Worker线程中）：

var encodedData = self.btoa(stringToEncode);

例如：

var string = 'Hello World!';
btoa(string)

运行结果：

"SGVsbG8gV29ybGQh"

btoa这个方法名称乍一看，很奇怪，不知道这个单词什么意思。我们可以理解为B to A，也就是从B到A。那B指什么，A指什么呢？和atob方法一样，B指的是low B普通字符串，A指的是Base64字符。

因此，btoa方法表示low B普通字符to Base64字符，也就是Base64编码。

base64解码

语法（浏览器中）：

var decodedData = window.atob(encodedData);

或者（浏览器或js Worker线程中）：

var decodedData = self.atob(encodedData);

例如：

atob('SGVsbG8gV29ybGQh')

运行结果：

"Hello World!"

atob这个方法名称乍一看，很奇怪，不知道这个单词什么意思。我们可以理解为A to B，也就是从A到B。这里的B指的就是Base64吗？哈哈哈，恭喜你！猜错了！A指的才是Base64，反的，B才是普通字符，普通意思就是low，俗称low B。所以我们这么记忆，Low B，Low B，B表示很Low的普通字符，A才是Base64，和首字母对应关系是反的。

因此，atob表示Base64字符to普通字符，也就是Base64解码。

base64 中文报错

btoa atob 这两个方法不适合非 ASCII 码的字符，会报错。

btoa('你好') // 报错

报错：InvalidCharacterError: String contains an invalid character

要将非 ASCII 码字符转为 Base64 编码，必须中间插入一个转码环节，再使用这两个方法。

先encode转码和decode编码

function b64Encode(str) {
  return btoa(encodeURIComponent(str));
}

function b64Decode(str) {
  return decodeURIComponent(atob(str));
}

b64Encode('你好') // "JUU0JUJEJUEwJUU1JUE1JUJE"
b64Decode('JUU0JUJEJUEwJUU1JUE1JUJE') // "你好"

IE8/IE9的polyfill

通过查阅资料发现，从IE10+浏览器开始，所有浏览器就原生提供了Base64编码解码方法，不仅可以用于浏览器环境，Service Worker环境也可以使用。

当下，仍有不少PC项目还需要兼容IE9，所以，我们可以专门针对这些浏览器再引入一段ployfill脚本或者一个JS文件即可。

ployfill JS脚本戳这里，或者直接右键这里下载源文件！

实际使用，我们可以借助IE条件注释无缝对接。

也就是HTML中嵌入下面一段代码：

<!--[if IE]>
<script src="./base64-polyfill.js"></script>
<![endif]-->

[if IE]表示所有IE浏览器，由于IE10+浏览器已经放弃了著名的IE条件注释的支持，Chrome等浏览器本身就不支持这个IE私有语法，因此，很天然的，上面一段script引入只在IE9-浏览器下有效。而我们本来就希望只IE8，IE9浏览器引入ployfill，于是正好完美衔接上。

也就是原生支持atob和btoa方法的浏览器认为就是一段无需关心的HTML注释，不支持atob和btoa的IE9及其以下浏览器则会加载我们的base64-polyfill.js，使浏览器也支持window.btoa和window.atob这个语法。

完整代码如下：

<head>
    <meta charset="UTF-8">
    <title>Base64解码/编码</title>
    <style>
        p { color: #0e932e; }
    </style>
    <!--[if IE]>
    <script src="js/base64-polyfill.js"></script>
    <![endif]-->
</head>
<body>
<p id="result1"></p>
<p id="result2"></p>
<script>
    result1.innerHTML = atob('bXliajEyMw==');
    result2.innerHTML = btoa('mybj123');
</script>

结果显示：