JavaScript 使用 btoa 和 atob 进行 Base64 转码与解码

JavaScript Base64 编码背景与应用

JavaScript 原生 API 内置了 Base64 支持，尽管早期受限于 JavaScript 的功能局限，Base64 的应用场景较为有限。随着 HTML5 标准的正式确立，Base64 的应用前景大幅拓展，如今可广泛应用于 FileReader API、拖拽上传以及 Canvas 和 Video 截图等 HTML5 功能中。

接下来介绍 Base64 转码与解码的具体实现方法。

btoa 与 atob 基础转码

首先探讨如何在 JavaScript 中执行 Base64 转码操作。

var str = 'javascript';

window.btoa(str)
//转码结果 "amF2YXNjcmlwdA=="

window.atob("amF2YXNjcmlwdA==")
//解码结果 "javascript"

Unicode 字符与中文编码处理

需要注意的是，Base64 转码的对象必须为字符串，这导致其对非字符串数据的处理存在局限。特别需要关注的是 Unicode 字符的转码问题。

var str = "China，中国"
window.btoa(str)

执行 btoa 时若包含非 Latin1 范围内的字符，会抛出错误：Uncaught DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.

显然，直接编码包含汉字的字符串无法成功，需要寻找支持汉字的方法。

此时可以使用 window.encodeURIComponent 和 window.decodeURIComponent 来解决编码问题。

var str = "China，中国";
window.btoa(window.encodeURIComponent(str))
//"Q2hpbmElRUYlQkMlOEMlRTQlQjglQUQlRTUlOUIlQkQ="

window.decodeURIComponent(window.atob('Q2hpbmElRUYlQkMlOEMlRTQlQjglQUQlRTUlOUIlQkQ='))
//"China，中国"

btoa 与 atob 的基本使用方法如上所示，大家可以尝试实践。希望本文内容能对大家的编程学习或工作有所帮助，感谢支持。