如何在JavaScript中将字符串转换为ReadableStream（非Node.js流）

下面介绍几种在浏览器或非Node.js环境下，把字符串转换为ReadableStream的实用方法：

方法一：利用Blob快速转换 #

这是最简洁的实现方式，借助Blob对象的原生stream()方法直接生成ReadableStream：

function stringToReadableStream(str) {
  const blob = new Blob([str]);
  return blob.stream();
}

这种方式无需手动处理流的推送和关闭，底层已经封装好了所有逻辑，适合绝大多数常规场景。

方法二：手动实现ReadableStream构造函数 #

如果需要更精细地控制流的读取过程（比如自定义分块逻辑），可以直接使用ReadableStream构造函数：

function stringToReadableStream(str) {
  let currentIndex = 0;
  const encoder = new TextEncoder(); // 将字符串编码为Uint8Array

  return new ReadableStream({
    start(controller) {
      function pushChunk() {
        if (currentIndex >= str.length) {
          controller.close(); // 数据推送完毕，关闭流
          return;
        }
        // 每次推送一个字符的二进制数据，也可以自定义分块大小
        const chunk = encoder.encode(str[currentIndex++]);
        controller.enqueue(chunk);
      }
      pushChunk();
    }
  });
}

方法三：分块处理大字符串 #

针对超长字符串，为了避免一次性加载过多数据占用内存，可以在pull方法中实现分块推送：

function stringToReadableStream(str, chunkSize = 1024) {
  let currentIndex = 0;
  const encoder = new TextEncoder();

  return new ReadableStream({
    pull(controller) {
      // 每次推送指定大小的块，直到剩余数据不足一个块
      while (currentIndex < str.length) {
        const chunkStr = str.slice(currentIndex, currentIndex + chunkSize);
        controller.enqueue(encoder.encode(chunkStr));
        currentIndex += chunkSize;
        if (chunkStr.length < chunkSize) break;
      }
      // 所有数据推送完成后关闭流
      if (currentIndex >= str.length) controller.close();
    }
  });
}

验证流的可用性 #

可以通过以下代码测试转换后的流是否正常工作：

const stream = stringToReadableStream('Hello, ReadableStream!');
const reader = stream.getReader();

reader.read().then(function processResult({ done, value }) {
  if (done) {
    console.log('流读取完成');
    return;
  }
  console.log('读取到的数据:', new TextDecoder().decode(value));
  return reader.read().then(processResult);
});

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