前端开发必备：深入理解btoa和atob函数

前端开发必备：深入理解btoa和atob函数

引用

CSDN

等

8

来源

1.

https://blog.csdn.net/qq_36380426/article/details/138174248

2.

https://blog.csdn.net/weixin_44283589/article/details/132165045

3.

https://cloud.baidu.com/article/3320935

4.

https://blog.csdn.net/carcarrot/article/details/100705946

5.

https://www.zhangxinxu.com/wordpress/2018/08/js-base64-atob-btoa-encode-decode/comment-page-1/

6.

https://www.cnblogs.com/djane/articles/10857826.html

7.

https://my.oschina.net/emacs_8600208/blog/16740193

8.

https://www.cnblogs.com/ziChin/p/17897499.html

在前端开发中，btoa 和 atob 是两个非常实用的全局函数，主要用于处理 Base64 编码和解码。它们在数据传输、存储以及安全场景中发挥重要作用。本文将深入解析这两个函数的使用方法、应用场景以及注意事项。

基本功能与使用

btoa 和 atob 的名称和功能可以这样理解：

基本用法示例

const text = "Hello, world!";
const base64Text = btoa(text); // "SGVsbG8sIHdvcmxkIQ=="
const decodedText = atob(base64Text); // "Hello, world!"

实际应用场景

1. 数据传输

在不支持二进制数据的系统之间传输数据时，可以使用 Base64 编码。例如，在 WebSocket 中传输音频数据：

// 发送音频数据前编码
const audioData = new Uint8Array([...]);
const base64Audio = btoa(String.fromCharCode(...audioData));
socket.send(base64Audio);

// 接收后解码
socket.onmessage = (event) => {
  const binaryData = atob(event.data);
  const audioBlob = new Blob([binaryData], {type: 'audio/mpeg'});
  // 播放音频
};

2. 图片数据处理

可以直接在 HTML 中嵌入 Base64 编码的图片：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">

3. 跨域通信

在需要绕过浏览器的同源策略时，可以使用 Base64 编码来传输数据。

Unicode 字符处理

btoa 不能直接处理 Unicode 字符，比如中文。需要先进行 URI 编码：

// 错误用法（直接编码中文会报错）
btoa("中文"); // ❌ 报错：InvalidCharacterError

// 正确做法：先转码
function utf8ToBase64(str) {
  return btoa(unescape(encodeURIComponent(str)));
}

function base64ToUtf8(base64) {
  return decodeURIComponent(escape(atob(base64)));
}

utf8ToBase64("你好"); // "JUU0JUJEJUEwJUU1JUE1JUJE"
base64ToUtf8("JUU0JUJEJUEwJUU1JUE1JUJE"); // "你好"

性能优化

对于大文件，可以采用分块处理的方式避免内存溢出：

async function encodeLargeFile(file) {
  const chunkSize = 1024 * 1024; // 1MB
  let offset = 0;
  while (offset < file.size) {
    const chunk = file.slice(offset, offset + chunkSize);
    const arrayBuffer = await chunk.arrayBuffer();
    const base64Chunk = btoa(String.fromCharCode(...new Uint8Array(arrayBuffer)));
    // 发送或存储 base64Chunk
    offset += chunkSize;
  }
}

兼容性解决方案

btoa 和 atob 在 IE10+ 及所有现代浏览器中都支持。对于 IE8/IE9，可以使用 polyfill：

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

或者提供替代实现：

if (!window.atob) {
  window.atob = function(encodedString) {
    // 替代实现代码
  };
}

总结对比表

通过本文的介绍，相信你已经掌握了 btoa 和 atob 的使用方法和注意事项。在实际开发中，合理运用这两个函数，可以让你的数据处理更加高效和灵活。