梳理字节数据(Uint8Array)转换成字符串的4种方法

简版:

  1. TextDecoder 是一个内置的 Web API,可以将字节数据解码为字符串。
  2. String.fromCharCode如果数据是单字节编码(如 ASCII),可以直接将每个字节转换为字符。
  3. 借助Blob: u8Array -> blob(uint8Array, { type: "text/plain" }) -> blob.text()
  4. 借助FileReader: u8Array -> blob(uint8Array, { type: "text/plain" }) -> fileReader -> readAsText()

1. 使用 TextDecoder

TextDecoder 是一个内置的 Web API,可以将字节数据(如 Uint8Array)解码为字符串。它支持多种编码格式,如 UTF-8、UTF-16 等。

优点

  • 简单易用,直接支持多种编码格式。
  • 性能较好,适合处理大量数据。

示例代码

JavaScript复制

ini 复制代码
const u8Array = new Uint8Array([72, 101, 108, 108, 111]); // 字节数据,对应 "Hello"
const decoder = new TextDecoder("utf-8"); // 指定编码格式为 UTF-8
const result = decoder.decode(u8Array);
console.log(result); // 输出:Hello

2. 使用 String.fromCharCode

String.fromCharCode 方法可以将 Unicode 编码值转换为对应的字符。如果数据是单字节编码(如 ASCII),可以直接将每个字节转换为字符。

优点

  • 简单,不需要额外的 API。

缺点

  • 只适用于单字节编码(如 ASCII)。对于多字节编码(如 UTF-8),可能会导致错误。

示例代码

JavaScript复制

javascript 复制代码
const u8Array = new Uint8Array([72, 101, 108, 108, 111]); // 字节数据,对应 "Hello"
const result = String.fromCharCode(...u8Array); // 使用扩展运算符将字节数组展开
console.log(result); // 输出:Hello

注意:如果字节数据是 UTF-8 编码的多字节字符(如中文),这种方法会失败。例如:

JavaScript复制

javascript 复制代码
const u8Array = new Uint8Array([228, 189, 160]); // UTF-8 编码的 "你"
console.log(String.fromCharCode(...u8Array)); // 输出:�

3. 借助 Blob

可以将字节数据包装为 Blob,然后通过 Blob.text() 方法将其解码为字符串。

优点

  • 支持多种编码格式,通过 type 参数指定。
  • 可以处理大文件。

缺点

  • 需要额外的步骤创建 Blob

示例代码

JavaScript复制

ini 复制代码
const u8Array = new Uint8Array([72, 101, 108, 108, 111]); // 字节数据,对应 "Hello"
const blob = new Blob([u8Array], { type: "text/plain" });
blob.text().then(result => {
  console.log(result); // 输出:Hello
});

4. 借助 FileReader

FileReader 是一个 Web API,可以读取文件内容。可以将字节数据包装为 Blob,然后使用 FileReader.readAsText() 方法读取为字符串。

优点

  • 支持多种编码格式,通过 FileReader.readAsText()encoding 参数指定。
  • 可以处理大文件。

缺点

  • 需要额外的步骤创建 BlobFileReader

示例代码

JavaScript复制

ini 复制代码
const u8Array = new Uint8Array([72, 101, 108, 108, 111]); // 字节数据,对应 "Hello"
const blob = new Blob([u8Array], { type: "text/plain" });
const reader = new FileReader();
reader.onload = function(event) {
  console.log(event.target.result); // 输出:Hello
};
reader.readAsText(blob);

总结

  • 如果需要处理多字节编码(如 UTF-8),推荐使用 TextDecoderBlob.text()
  • 如果数据是单字节编码(如 ASCII),可以使用 String.fromCharCode,但需要谨慎处理编码问题。
  • 如果需要处理大文件,可以使用 Blob.text()FileReader.readAsText()
相关推荐
CharlesYu012 小时前
前端性能优化的第一性原理,是不断缩短“用户发起意图 → 获得可用结果”之间的时间
前端
平头哥技术团队3 小时前
Day 21 _ 页内锚点_给每段起个 id,目录写 href=_#id_,点一下页面就滚到那一段
前端·html·html5
子兮曰4 小时前
Bun v1.4.1 深度解析:从 Zig 到 Rust,一场 11 天、64 个 AI 代理的语言迁徙
前端·后端·bun
人民广场吃泡面4 小时前
什么是AI Agent?它又能给前端带来哪些效率提升?
前端·人工智能
中科三方4 小时前
两家域名注册商资质被ICANN终止:企业域名资产安全再受关注
前端·网络·安全·域名
bug总结5 小时前
uniapp vue3全局方法注册使用
前端·javascript·uni-app
华无丽言5 小时前
如何在宜搭中实现获取子表中的字段值赋值到父表中?
前端·javascript·低代码
IT_陈寒6 小时前
Vue的computed属性竟然坑了我一把
前端·人工智能·后端
威斯软科的老司机6 小时前
通俗讲解 CNN 图像识别、向量 Embedding、Softmax 概率计算这三块的简化原理
前端·人工智能·ui·数字孪生
泯泷7 小时前
手搓JSVM第 12 篇:完整最小 JSVM 实现与源码设计复盘
前端·javascript·前端框架