大家好！今天咱们来聊点“底层”的——但别担心，不是让你去写汇编，而是用 JavaScript 轻松操作二进制数据。你可能觉得“二进制？那不是 C/C++ 的地盘吗？”其实不然！从 HTML5 开始，JavaScript 也拥有了处理二进制的能力，尤其在处理图片、音频、网络通信等场景时特别实用。
今天我们就通过一个简单的例子，看看如何用 ArrayBuffer、Uint8Array、TextEncoder 和 TextDecoder 来编码和解码字符串，顺便理解它们之间的关系。
为什么需要处理二进制？
在计算机世界里，一切最终都是二进制。文字、图片、视频……最终都会变成一串 0 和 1 存储或传输。但在日常开发中，我们通常直接操作字符串、对象这些高级结构。然而，一旦涉及网络请求、文件读取、加密、音视频处理等场景，就绕不开原始的二进制数据了。
HTML5 引入了一套强大的 API，让我们能在浏览器中高效地操作这些“字节”。
核心三剑客：ArrayBuffer、TypedArray、TextEncoder/TextDecoder
1. ArrayBuffer：一块原始内存
你可以把它想象成一个固定大小的“盒子” ，里面装着原始的二进制数据。但它本身不能直接读写——就像一个上了锁的箱子，你需要一把“钥匙”才能操作里面的内容。
const buffer = new ArrayBuffer(12); // 创建一个 12 字节的缓冲区
2. Uint8Array：打开盒子的“视图”
这就是那把“钥匙”！Uint8Array 是一种 TypedArray（类型化数组） ，它提供了一个视图（view） ，让我们能以“8位无符号整数”（即 0~255 的字节）的方式读写 ArrayBuffer。
const view = new Uint8Array(buffer);
关键点来了：视图和缓冲区共享同一块内存。也就是说，你修改 view[0]，实际上就是在修改 buffer 里的第一个字节！
3. TextEncoder & TextDecoder：字符串 ↔ 字节的桥梁
TextEncoder：把 JS 字符串（如'你好'）编码成 UTF-8 格式的字节序列（Uint8Array）。TextDecoder：把 UTF-8 字节序列还原成可读的字符串。
它们是处理文本与二进制之间转换的“翻译官”。
动手实践：把“你好 HTML5”存进 Buffer
来看一段完整代码（就是你写的那个 😄）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML 5 Buffer</title>
</head>
<body>
<h1>Buffer</h1>
<div id="output"></div>
<script>
// 1. 编码字符串为 UTF-8 字节
const encoder = new TextEncoder();
const myBuffer = encoder.encode('你好 HTML5');
console.log(myBuffer); // Uint8Array(12) [228, 189, 160, 229, 165, 189, 32, 72, 84, 77, 76, 53]
// 2. 创建一个 12 字节的 ArrayBuffer
const buffer = new ArrayBuffer(12);
const view = new Uint8Array(buffer);
// 3. 把编码后的字节逐个拷贝到 buffer 中
for (let i = 0; i < myBuffer.length; i++) {
view[i] = myBuffer[i];
}
//此时 buffer中就存储着'你好 HTML5的UTF-8字节了'
//为什么这个是逐个拷贝到view[i] 却说是拷贝给buffer? 因为视图view和缓冲区buffer 共享同一块内存 修改view[i]会直接修改buffer的内容
// 4. 用 TextDecoder 把 buffer 解码回字符串
const decoder = new TextDecoder();
const originalText = decoder.decode(buffer);
console.log(originalText); // "你好 HTML5"
// 5. 显示结果
document.getElementById('output').innerHTML = `
完整数据: [${view}] <br>
第一个字节: ${view[0]} <br>
缓冲区的长度: ${buffer.byteLength} <br>
原来的文本: ${originalText}
`;
</script>
</body>
</html>
这段代码做了什么？
- 用
TextEncoder把'你好 HTML5'转成 12 个字节的Uint8Array。 - 创建一个同样大小（12 字节）的
ArrayBuffer。 - 通过
Uint8Array视图，把字节一个个“搬”进buffer。 - 再用
TextDecoder从buffer里读出来，完美还原原始文本！
你会发现：
- 中文字符（如“你”）在 UTF-8 中占 3 个字节，所以
'你好'占 6 字节； - 空格和英文字符各占 1 字节；
- 总共 6 + 1 + 5 = 12 字节，刚好填满我们的
ArrayBuffer。
小结：轻松掌握二进制操作
ArrayBuffer是底层存储，不能直接操作。TypedArray（如Uint8Array）是操作ArrayBuffer的窗口。TextEncoder/TextDecoder让字符串和字节互转变得超简单。- 所有操作都在内存中完成，高效且安全。
虽然今天我们只处理了文本，但这套机制同样适用于图片（Blob）、音频（Web Audio API）、WebSocket 二进制帧等场景。掌握它，你就离“全栈二进制玩家”又近了一步！
下次当你看到 ArrayBuffer 不再一脸懵，而是自信地说：“哦，不就是个装字节的盒子嘛！”——恭喜你，已经入门啦！🎉
希望这篇小文能帮你轻松理解 JavaScript 中的二进制操作。如果你觉得有用，欢迎点赞、收藏，也欢迎在评论区聊聊你用这些 API 做过哪些有趣的项目！
