数组构建字符串更高效，因JS字符串不可变，频繁拼接导致O(N²)时间复杂度，而数组push摊还O(1)，join单次遍历，总复杂度O(N)。

用数组实现字符串构建缓冲区，核心是避免频繁字符串拼接带来的内存复制开销。JavaScript 中字符串不可变，每次 + 或 += 都会生成新字符串，而数组的 push 是 O(1) 摊还操作，最后用 join('') 一次性合成，效率更高——尤其在大量片段、循环拼接或模板渲染场景下优势明显。

为什么数组比直接拼接更高效

字符串在 JS 中是原始值，每次拼接都触发：

• 分配新内存空间（大小为两字符串长度之和）
• 逐字节拷贝原有内容
• 再拷贝新增内容

若循环拼接 N 次，时间复杂度接近 O(N²)。而数组只在内部扩容时有少量复制（摊还 O(1)），join 是单次遍历，总复杂度稳定在 O(N)。

基础缓冲区封装：一个可复用的 StringBuilder 类

封装数组操作，提供链式调用和类型安全支持：

示例代码：

class StringBuilder {
  constructor() {
    this.buffer = [];
  }
  append(str) {
    if (str != null) this.buffer.push(String(str));
    return this;
  }
  appendLine(str) {
    this.append(str).append('\n');
    return this;
  }
  toString() {
    return this.buffer.join('');
  }
  clear() {
    this.buffer.length = 0;
    return this;
  }
}

用法简洁清晰：

const sb = new StringBuilder();
sb.append('Hello').append(' ').append('World').appendLine('!');
console.log(sb.toString()); // "Hello World!\n"

实战：动态拼接含变量的 HTML 片段

比如渲染用户列表，字段来自对象，需转义、条件插入、循环嵌套：

function buildUserList(users) {
  const sb = new StringBuilder();
  
  sb.append('

'); for (const user of users) { sb.append('
• ') .append('').append(escapeHtml(user.name)).append('') .append(' (age: ').append(user.age || 'N/A').append(')'); if (user.email) { sb.append(' '); } sb.append('
'); } sb.append('

'); return sb.toString(); } function escapeHtml(str) { return String(str) .replace(/&/g, '&') .replace(/, '/g, '>') .replace(/"/g, '"'); }

相比反复 html += ...，该方式逻辑清晰、无隐式类型转换风险、性能可控，且 buffer 可提前预估容量（如 new Array(expectedCount) 初始化）进一步优化。

进阶技巧：支持模板插值与延迟求值

对需运行时计算的变量（如函数返回值、异步结果占位），可扩展支持函数式插入：

appendLazy(fn) {
  this.buffer.push(typeof fn === 'function' ? fn() : String(fn));
  return this;
}
// 或更灵活地延迟到 toString() 时执行
appendDeferred(fn) {
  this.buffer.push(() => String(fn()));
  return this;
}
toString() {
  return this.buffer.map(item => 
    typeof item === 'function' ? item() : item
  ).join('');
}

这样既保持构建过程轻量，又支持复杂上下文依赖的值注入。