如何按行读取Web标准API中的ReadableStream？

要按行读取ReadableStream，核心难点在于处理跨越多个块的行——直接拆分单个块会导致行被截断。我们可以通过TransformStream创建转换流，把字节流转换成按行输出的流，具体实现如下：

实现行转换流 #

创建自定义转换流，维护缓冲区保存不完整的行，确保每一行都能完整输出：

function createLineTransformer() {
  let buffer = '';
  const decoder = new TextDecoder();

  return new TransformStream({
    // 处理每个传入的块
    transform(chunk, controller) {
      // 解码当前块，stream: true确保多字节字符不会被截断
      buffer += decoder.decode(chunk, { stream: true });
      // 按换行符拆分（兼容\r\n和\n）
      const lines = buffer.split(/\r?\n/);
      // 最后一段是不完整的行，留在缓冲区
      buffer = lines.pop();
      // 输出所有完整的行
      lines.forEach(line => controller.enqueue(line));
    },
    // 流结束时处理剩余的缓冲区内容
    flush(controller) {
      if (buffer) {
        controller.enqueue(buffer);
      }
    }
  });
}

使用转换流读取行 #

将原始ReadableStream通过pipeThrough传入转换流，之后即可按行迭代读取：

const readableStream = (await fetch('http://example.com')).body;
const lineStream = readableStream.pipeThrough(createLineTransformer());

// 按行读取并处理
for await (const line of lineStream) {
  console.log('读取到一行:', line);
}

关键细节说明 #

• 多字节字符处理：使用TextDecoder的stream: true选项，确保分块解码时不会破坏中文、emoji等多字节Unicode字符
• 换行符兼容：通过正则/\r?\n/同时处理Windows风格的\r\n和类Unix风格的\n
• 缓冲区维护：每次拆分后保留最后一段不完整内容，等待下一个块到来后拼接，避免行被截断

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