js的btoa 和 atob之Base64编码和解码

以下内容摘录自

作者：JSON_NULL
链接：https://www.jianshu.com/p/b2c6dc5fad0a

btoa 方法

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

atob 方法

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

你在处理时如果字符串里有中文，可以这样解决

!function(W){
  W.Base64 = {
     utf8ToBase64:function (str){
       return btoa(unescape(encodeURIComponent(str)));
     },
     base64ToUtf8: function(str){
        return decodeURIComponent(escape(atob(str)));
      }
  }
}(window);

调用

Base64.utf8ToBase64('橙-极纪元JJY.Cheng');
//编码结果
'5qmZLeaegee6quWFg0pKWS5DaGVuZw=='

Base64.base64ToUtf8('5qmZLeaegee6quWFg0pKWS5DaGVuZw==');
//解码结果
'橙-极纪元JJY.Cheng'

这样做可以有效解决下面错误提示：

Uncaught DOMException: Failed to execute 
'btoa' on 'Window': The string to be encoded 
contains characters outside of the Latin1 range.

译文：

未捕获的DOMException: Failed to execute 'btoa' on 'Window':要编码的字符串包含Latin1范围之外的字符。

详细问题请阅读

转换Base64编码报错Uncaught DOMException: Failed to execute ‘btoa‘ on ‘Window‘: The string to be encoded co-CSDN博客

为什么中文字符串转码后，就可以解决报错？

你可以看这篇文章

encodeURI、encodeURIComponent、decodeURI 、 decodeURIComponent、escape 和 unescape对字符串进行URI编码和解码，也为转义-详解-CSDN博客

看完后，可以看下面内容?

综合上面文章所述，我们可以清楚的知道，

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)));
}