能否一步将含Uint8Array、ArrayBuffer的JS二进制数据编码为字符串？

当然可以一步完成包含Uint8Array和ArrayBuffer的JS对象与字符串的互转，无需手动追踪每个字段的类型。下面提供两种实用方案：

方案一：原生API实现（无第三方依赖） #

利用浏览器原生的结构化克隆算法（Structured Clone），它原生支持Uint8Array、ArrayBuffer及嵌套对象的序列化，再将序列化后的二进制数据转成可传输的字符串。

编码代码 #

// 将包含二进制类型的JS对象编码为字符串
function encodeObject(obj) {
  // 将对象结构化克隆为ArrayBuffer
  const serializedBuffer = structuredClone(obj);
  // 转成Uint8Array以便处理
  const uint8Array = new Uint8Array(serializedBuffer);
  // 转换为Base64字符串（确保所有字节可安全传输）
  return btoa(String.fromCharCode(...uint8Array));
}

解码代码 #

// 将字符串解码回原始JS对象（包含二进制类型）
function decodeObject(str) {
  // 从Base64转回Uint8Array
  const uint8Array = new Uint8Array(atob(str).split('').map(char => char.charCodeAt(0)));
  // 从ArrayBuffer结构化克隆回原始对象
  return structuredClone(uint8Array.buffer);
}

注意：结构化克隆支持绝大多数JS内置类型（包括嵌套对象、数组、Date、Map等），兼容性覆盖所有现代浏览器及Node.js 17+。

方案二：使用MessagePack（更高效） #

MessagePack是一种轻量的二进制序列化格式，原生支持二进制类型，序列化后的体积比原生方案更小，效率更高。可以使用@msgpack/msgpack库实现。

安装依赖 #

npm install @msgpack/msgpack

编码解码代码 #

import { encode, decode } from '@msgpack/msgpack';

// 编码：对象转Base64字符串
function encodeObject(obj) {
  const uint8Array = encode(obj); // 直接序列化对象为Uint8Array
  return btoa(String.fromCharCode(...uint8Array));
}

// 解码：Base64字符串转回对象
function decodeObject(str) {
  const uint8Array = new Uint8Array(atob(str).split('').map(char => char.charCodeAt(0)));
  return decode(uint8Array);
}

方案对比 #

• 原生方案：零依赖，兼容性好，适合简单场景或不想引入第三方库的情况，但序列化后的字符串体积相对较大。
• MessagePack方案：序列化效率更高，体积更小，适合大型对象或高频传输场景，但需要引入第三方库。

重要提示：你之前直接用UTF-8编码/解码二进制数据的方法存在风险——二进制数据可能包含UTF-8无法解析的字节，会导致数据损坏。上述两种方案均通过Base64或二进制安全的序列化方式避免了这个问题。

内容的提问来源于stack exchange，提问作者mikemaccana