如何使用JavaScript进行Base64编解码

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/06/27/%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8JavaScript%E8%BF%9B%E8%A1%8CBase64%E7%BC%96%E8%A7%A3%E7%A0%81/

摘要

本文主要讲述了：

作用
扩展作用域

正文

作用

btoa()：将二进制字符串转换为 Base64 编码的 ASCII 字符串
atob()：将 Base64 编码的 ASCII 字符串转换为二进制字符串

注意：btoa()只接受二进制字符串，传入其他字符串会报错，传入非字符串类型的值会隐式转换为字符串类型

示例：a的十六进制 UTF-16BE 编码为00 61

1 2	console.log(btoa('a')); //"YQ==" console.log(atob('YQ==')); //"a"

示例：中的十六进制 UTF-16BE 编码为4E 2D

try {
  console.log(btoa('中'));
} catch (error) {
  // Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.
  console.log(error.message);
}

扩展作用域

btoaEnhanced()向后兼容btoa()，并将作用域从二进制字符串扩展到 UTF-16 字符串
atobEnhanced()向后兼容atob()，并将作用域从二进制字符串扩展到 UTF-16 字符串

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      function btoaEnhanced(str) {
        return btoa(unescape(encodeURIComponent(str)));
      }

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

      // YQ==
      console.log(btoaEnhanced('a'));
      // 5Lit
      console.log(btoaEnhanced('中'));
      // 8J+Yig==
      console.log(btoaEnhanced('😊'));

      // a
      console.log(atobEnhanced('YQ=='));
      // 中
      console.log(atobEnhanced('5Lit'));
      // 😊
      console.log(atobEnhanced('8J+Yig=='));
    </script>
  </body>
</html>