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

2024-01-03 02:12:07

以下内容摘录自

作者: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)));
}

文章来源:https://blog.csdn.net/cplvfx/article/details/135342244
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。