1. 项目概述：为什么字符串拼接值得深究？

在JavaScript的世界里，字符串拼接，或者说连接，是每个开发者从入门第一天起就在做的事情。它看起来简单到不值一提——不就是把几个字串拼在一起吗？但恰恰是这种高频、基础的操作，背后隐藏着性能、可读性、乃至代码健壮性的大学问。我见过太多项目，初期为了图快，随手用+号一路拼接，等到业务复杂、字符串操作成为性能瓶颈时，再回头重构，成本就高得吓人了。

今天，我们就来彻底拆解JavaScript中字符串拼接的五种核心方式。这不仅仅是记住五种语法，更是要理解它们各自的适用场景、底层原理和性能差异。无论是处理简单的用户提示信息，还是构建复杂的动态HTML模板、拼接庞大的API请求参数，选对方法都能让你的代码跑得更快、写得更优雅。接下来，我会结合我十多年的踩坑经验，带你从最基础的+运算符，到现代ES6的模板字符串，再到一些“非常规”但有时很管用的方法，逐一剖析，并附上大量的实测数据和避坑指南。

2. 五种字符串拼接方式深度解析

2.1 方式一：加号 (+) 运算符——最经典的双刃剑

加号+是绝大多数人学会的第一种字符串连接方式，它的语法直观得不能再直观：str1 + str2。在大多数情况下，它工作得很好，特别是连接少量（2-3个）字符串时，代码简洁明了。

2.1.1 工作原理与隐式转换+运算符在JavaScript中承载了“加法”和“连接”双重职责。当操作数中至少有一个是字符串时，+就会执行字符串连接操作。此时，另一个非字符串的操作数会被隐式转换为字符串。

let result = 'Hello, ' + 'World!'; // “Hello, World!” let numStr = 'The answer is ' + 42; // “The answer is 42”，数字42被转为字符串 let boolStr = 'Status: ' + true; // “Status: true”，布尔值true被转为字符串

这个隐式转换是“双刃剑”的另一面。它虽然方便，但也容易引入难以察觉的Bug。

注意：隐式转换的规则需要牢记。null会变成"null"，undefined会变成"undefined"，但数组和对象会调用其toString()方法，通常得到不太直观的结果（如[1,2]变成"1,2"，{}变成"[object Object]"）。在拼接用户输入或动态数据时，务必清楚每个变量的类型。

2.1.2 性能陷阱与适用场景很多人误以为+很慢，其实不然。对于固定数量的字符串连接，现代JavaScript引擎（V8, SpiderMonkey等）对其优化得非常好，性能通常是最优的之一。

真正的性能陷阱出现在循环中进行大量拼接。

// 错误示范：性能极差 let str = ''; for (let i = 0; i < 10000; i++) { str += 'data ' + i; // 每次循环都创建新的字符串 }

为什么差？因为字符串在JavaScript中是不可变的（Immutable）。每次使用str += something，引擎都需要执行以下步骤：1. 为当前str分配内存；2. 为something分配内存；3. 分配一块新的足够容纳两者总和的内存；4. 将旧str和something复制到新内存；5. 让变量str指向这块新内存。在万次循环中，这就意味着数以万计的内存分配和复制操作，以及大量旧字符串垃圾的产生，性能自然急剧下降。

适用场景：

• 连接2-3个静态或已知的字符串片段。
• 在非性能关键的脚本中快速拼接。
• 作为函数参数内联拼接（如console.log('Value: ' + val)）。

实操心得：我个人的习惯是，在明确知道只拼接少于5个片段，且不在密集循环中时，会优先使用+，因为它书写最快捷。一旦片段数量可能变化或需要在循环中拼接，我会立刻考虑其他方案。

2.2 方式二：Array.prototype.join()——循环拼接的救星

当需要连接一个数组中的所有元素，或者在循环中拼接大量字符串时，join()方法是毋庸置疑的性能冠军和最佳实践。

2.2.1 语法与基本使用join()方法将一个数组（或类数组对象）的所有元素连接成一个字符串。你可以指定一个分隔符（separator）作为参数，该分隔符会被插入到数组的每个元素之间。如果省略分隔符或传入undefined，则默认使用逗号,。

let arr = ['Fire', 'Air', 'Water']; console.log(arr.join()); // “Fire,Air,Water” console.log(arr.join('')); // “FireAirWater” console.log(arr.join('-')); // “Fire-Air-Water”

2.2.2 高性能背后的原理join()方法的高性能秘诀在于，JavaScript引擎内部对其实现了高度优化。引擎可以预先计算最终字符串的总长度，然后一次性分配足够的内存，接着按顺序将数组元素复制进去。这个过程避免了+在循环中产生的中间字符串和反复的内存分配/垃圾回收，尤其当数组元素很多时，优势是数量级的。

让我们用join()重构上面那个糟糕的循环例子：

// 正确示范：高性能 let parts = []; // 1. 使用数组存储片段 for (let i = 0; i < 10000; i++) { parts.push('data ' + i); // 2. 将片段推入数组（这里内部的 + 是微操作，影响小） } let str = parts.join(''); // 3. 一次性连接

即使算上创建数组和push操作的开销，这种方法在连接次数超过几十次时，性能就会显著超越循环+=。

2.2.3 灵活的分隔符处理join()的另一个强大之处在于分隔符的灵活性。你可以轻松生成CSV行、带空格或换行的格式化文本等。

// 生成CSV行 let csvRow = ['John', 'Doe', 30, 'New York'].join(','); // 结果： “John,Doe,30,New York” // 生成带换行的HTML列表项 let items = ['<li>Item 1</li>', '<li>Item 2</li>']; let htmlList = '<ul>\n' + items.join('\n') + '\n</ul>';

注意事项：

• join()会将其参数（包括数组中的null和undefined）转换为字符串。空数组调用join()会返回空字符串""。
• 对于超大型数组（例如数十万个元素），即使使用join()，一次性构建这个数组本身也可能消耗大量内存。在这种情况下，可能需要考虑分块处理。

2.3 方式三：String.prototype.concat()——被遗忘的“正规军”

concat()是String对象的一个标准方法，它的设计目的就是连接字符串。语法是：str.concat(str2 [, ...strN])，它可以接受任意多个参数。

2.3.1 基本用法

let hello = 'Hello'; console.log(hello.concat(' ', 'World', '!')); // “Hello World!”

它看起来像是+运算符的函数式版本。事实上，在只连接两个字符串时，它的行为与+几乎一致。

2.3.2 与加号 (+) 的细微差别尽管目的一致，但concat()在处理非字符串参数时，行为有细微但重要的区别。concat()会严格地将所有参数转换为字符串，而+运算符则遵循更复杂的“优先字符串连接”规则。

看一个例子：

let str = “Base”; console.log(str.concat(null, undefined)); // “Basenullundefined” console.log(str + null + undefined); // “Basenullundefined” // 看起来一样？再看这个： console.log(null + str); // “nullBase” console.log(str.concat(null)); // “Basenull”

当+的第一个操作数是null或undefined时，它们不会被优先转为字符串，而是会尝试进行数值加法（失败后得到NaN），但与其他字符串结合时规则又不同。而concat()无论怎样，都会先将原字符串str作为基础，然后把所有参数转成字符串拼上去，行为更一致、更可预测。

2.3.3 为什么如今不常被推荐？

1. 性能并无优势：在现代JavaScript引擎中，concat()的性能并不比+运算符更好，在连接多个字符串时，通常还略逊于join()。
2. 可读性较差：str1 + str2比str1.concat(str2)更简洁直观。
3. 模板字符串的崛起：对于需要嵌入变量或表达式的复杂拼接，模板字符串是更好的选择。

因此，在当前的前端开发中，concat()的使用场景已经非常狭窄。它更像是一个存在于语言规范中的“备选方案”。我个人几乎只在某些特定函数式编程的上下文中，或者需要明确强调“这是一个字符串连接操作”时，才会偶尔用到它。

2.4 方式四：模板字符串 (Template Literals)——现代开发的优雅之选

ES6（ECMAScript 2015）引入的模板字符串，使用反引号 (`) 标识，是字符串拼接领域的一次革命。它解决了复杂拼接时+和concat()带来的可读性噩梦。

2.4.1 字符串插值与多行字符串模板字符串的核心特性是插值。通过在${}中放入任何有效的JavaScript表达式，可以将其计算结果嵌入字符串。

let name = ‘Alice’; let age = 25; // 传统方式，可读性差 let intro1 = ‘My name is ‘ + name + ‘ and I am ‘ + age + ‘ years old.’; // 模板字符串，清晰直观 let intro2 = `My name is ${name} and I am ${age} years old.`;

对于多行字符串，传统方式需要手动添加\n或使用+连接多行，而模板字符串直接保留换行：

let multiLine = `This is a string spanning multiple lines.`;

2.4.2 标签模板 (Tagged Templates) —— 高级用法模板字符串的另一个强大功能是“标签模板”。它允许你用一个函数来解析模板字符串。这个函数的第一个参数是一个字符串数组（由模板中所有非插值部分的字面量组成），后续参数是各个插值表达式的计算结果。

function highlight(strings, ...values) { // strings: [‘I have ‘, ‘ apples and ‘, ‘ bananas.’] // values: [3, 5] return strings.reduce((result, str, i) => { let value = values[i] !== undefined ? `<strong>${values[i]}</strong>` : ‘’; return result + str + value; }, ‘’); } let count1 = 3， count2 = 5; let message = highlight`I have ${count1} apples and ${count2} bananas.`; // message: “I have <strong>3</strong> apples and <strong>5</strong> bananas.”

标签模板常用于国际化(i18n)、HTML转义、样式化输出等高级场景，是库和框架开发者手中的利器。

2.4.3 性能考量与最佳实践模板字符串在可读性和开发体验上满分，那性能呢？好消息是，现代引擎对模板字符串的优化已经非常到位。对于大多数日常用例，其性能与使用+连接相当，有时甚至更优，因为引擎可以对其进行静态分析。

但是，在性能极度敏感的循环中，动态构建的模板字符串可能仍不是最优解。因为每次迭代 ${a}${b} 都会创建一个新的模板字面量进行求值。对于超大规模的循环拼接，先将部分推入数组再用join()可能仍是终极方案。

最佳实践：对于所有需要嵌入变量、表达式或多行文本的字符串拼接，无条件首选模板字符串。它让代码更清晰，更易于维护，是现代JavaScript开发的标配。

2.5 方式五：非常规方法——特定场景的“奇兵”

除了上述四种主流方法，在某些特定场景或历史代码中，你可能会遇到一些非常规的拼接方式。

2.5.1 古老的方式：String.prototype.concat.call()在极早期的代码或某些特定模式中，你可能看到用Function.prototype.call或apply来调用concat方法，用于连接类数组对象或参数列表。

// 连接一个arguments对象 function concatenateArgs() { // arguments 是类数组对象，没有 join 方法 return String.prototype.concat.apply(‘’, arguments); } console.log(concatenateArgs(‘Hello’, ‘ ‘, ‘World’)); // “Hello World”

如今，我们完全可以用Array.from(arguments).join(‘’)或更优雅的Rest参数…args配合模板字符串来实现，这种方法已成为历史遗迹。

2.5.2 另类的思路：Array.prototype.reduce()从函数式编程的角度，可以将字符串拼接视为一个归约（reduce）操作。虽然不常用，但这也是一种可行的方式。

let words = [‘Hello’, ‘ ‘, ‘World’, ‘!’]; let sentence = words.reduce((acc, cur) => acc + cur, ‘’); console.log(sentence); // “Hello World!”

这种方法在概念上很清晰（“将数组归约为一个字符串”），但性能上不如直接的join(‘’)，因为reduce内部仍然是循环和+操作。它更适合在已经使用函数式链式调用、且需要表达特定语义时使用。

2.5.3 性能压榨：StringBuilder模式（仅限超大规模拼接）在Java等语言中，StringBuilder是处理大量字符串拼接的标准做法。虽然JavaScript没有原生的StringBuilder，但我们可以模拟其思想：使用数组作为缓冲区。

我们之前介绍的Array.join()模式就是最简单的StringBuilder。对于极端性能要求的场景（例如在Node.js中处理数百万行的日志或数据），可以进一步优化：

1. 预分配数组大小（如果可知）。
2. 避免在循环中创建小字符串，尽量直接push字面量或已存在的字符串引用。
3. 在最后一步使用join(‘’)。

// 假设知道最终大概有10000个片段 let buffer = new Array(10000); let index = 0; for (let i = 0; i < 10000; i++) { // 直接赋值，避免中间操作 buffer[index++] = `data_${i}`; } let result = buffer.join(‘’);

对于99.9%的Web应用，标准的[].push() + join()已经绰绰有余。这种预分配优化属于微观优化，仅在性能剖析（Profiling）明确指向字符串拼接为瓶颈时才需要考虑。

3. 性能对比与实战选型指南

了解了各种方法，我们该如何选择？光说不练假把式，我设计了一个简单的性能测试来给大家一个直观的感受。请注意，不同浏览器、不同引擎、不同数据规模下的结果会有差异，但趋势是稳定的。

3.1 性能测试实验我们测试在循环中连接10万个短字符串的性能。

const COUNT = 100000; const testString = ‘test’; // 测试1：加号 (+) 循环 console.time(‘Plus operator’); let str1 = ‘’; for (let i = 0; i < COUNT; i++) { str1 += testString; } console.timeEnd(‘Plus operator’); // 测试2：数组 join() console.time(‘Array join’); let parts = []; for (let i = 0; i < COUNT; i++) { parts.push(testString); } let str2 = parts.join(‘’); console.timeEnd(‘Array join’); // 测试3：模板字符串循环 (动态创建模板) console.time(‘Template literal’); let str3 = ‘’; for (let i = 0; i < COUNT; i++) { str3 = `${str3}${testString}`; } console.timeEnd(‘Template literal’);

典型结果（Chrome V8引擎）：

• Plus operator: ~1500ms
• Array join: ~12ms
• Template literal: ~1450ms

结果一目了然：在大量循环拼接的场景下，Array.join()的性能是碾压性的优势。+和模板字符串在循环中的性能表现都很差，因为它们每次迭代都创建新字符串。

3.2 实战选型决策树根据上面的分析和测试，我可以给出一个清晰的选型指南：

1. 场景：连接少量（<5个）已知字符串片段

   • 首选：+运算符 或模板字符串。
   • 理由：代码最简洁，性能无差异，可读性好。如果涉及变量，直接用模板字符串。

2. 场景：在循环中或动态连接大量字符串（次数 > 10）

   • 首选：Array.join()模式。
   • 步骤：创建一个空数组，在循环中将片段push进数组，循环结束后调用array.join(‘’)。
   • 理由：避免中间字符串的反复创建和垃圾回收，性能最优。

3. 场景：构建包含变量、表达式、多行格式的复杂字符串

   • 无条件首选：模板字符串。
   • 理由：极高的可读性和可维护性，性能在非循环场景下表现良好。

4. 场景：连接一个数组的所有元素（无论是否循环）

   • 首选：Array.join()。
   • 理由：语义最清晰，原生为此场景设计，性能最佳。

5. 场景：需要处理null/undefined且希望行为一致

   • 可考虑：String.concat()。
   • 理由：行为更可预测，但通常用模板字符串配合空值合并运算符??或条件判断更清晰。

一句话总结：日常用模板字符串，循环拼接用数组join。这基本能覆盖99%的现代JavaScript开发场景。

4. 常见问题与深度避坑指南

在实际项目中，字符串拼接远不止选择方法那么简单。下面是我总结的几个高频问题和深度避坑点。

4.1 问题：拼接用户输入时，如何防范安全风险？这是Web安全的关键。直接将用户输入拼接到HTML、SQL或Shell命令中，会导致跨站脚本攻击、SQL注入等严重漏洞。

• 危险示例：

  let userComment = ‘<script>恶意代码</script>’; let html = `<div>${userComment}</div>`; // XSS攻击！

• 解决方案：

  1. 转义：在将内容插入HTML前，对特殊字符（<,>,&,“,‘）进行转义。

     function escapeHtml(text) { const map = { ‘&’: ‘&amp;’, ‘<’: ‘&lt;’, ‘>’: ‘&gt;’, ‘“’: ‘&quot;’, “‘”: ‘&#039;’ }; return text.replace(/[&<>“’]/g, (m) => map[m]); } let safeHtml = `<div>${escapeHtml(userComment)}</div>`;

  2. 使用现代框架/库：React, Vue, Angular等主流框架在默认情况下都会对插值进行转义。但使用dangerouslySetInnerHTML(React) 或v-html(Vue) 时要格外小心。
  3. 对于SQL/命令：永远不要拼接！必须使用参数化查询（Prepared Statements）或命令参数。

4.2 问题：拼接路径或URL时，如何处理多余或缺失的分隔符？手动拼接文件路径或URL参数时，容易产生双斜杠//或缺失斜杠的问题。

• 笨拙方法：

  let base = ‘/api/v1’; let endpoint = ‘users’; let url = base + ‘/’ + endpoint; // 需要手动管理斜杠

• 优雅方案：

  1. 使用URL和URLSearchParams对象（用于URL）：

     let urlObj = new URL(‘/api/v1’, ‘https://example.com’); urlObj.pathname = path.join(urlObj.pathname, ‘users’); // 假设有Node.js path模块 // 或手动处理 function joinUrl(base, …paths) { return [base, …paths].map(p => p.replace(/^\/|\/$/g, ‘’)).join(‘/’); }

  2. 使用专门的工具函数：在Node.js中，使用path.join()。在浏览器中，可以自己编写或引入工具函数来规范化路径。

4.3 问题：拼接国际化字符串时，如何处理动态内容和复数形式？简单的拼接无法应对复杂的国际化需求。

• 错误示范：

  let message = ‘You have ‘ + count + ‘ new message’ + (count !== 1 ? ‘s’ : ‘’); // 中文怎么办？法语、俄语的复数规则更复杂。

• 正确方案：使用成熟的国际化库，如i18next,formatjs(React Intl) 等。它们基于消息描述（Message Descriptor）和 ICU 语法，能完美处理复数、性别、日期格式等。

  // 使用 i18next i18next.t(‘message_key’, { count: unreadCount }); // 对应的语言资源文件定义复数规则 // en: { “message_key”: “You have {{count}} new message”, “message_key_plural”: “You have {{count}} new messages” }

4.4 问题：超长字符串拼接导致内存溢出或性能卡顿怎么办？即便使用了Array.join()，如果一次性拼接的字符串过于巨大（例如几百MB），仍可能导致高内存占用和UI线程阻塞。

• 解决方案：
  1. 流式处理/分块：不要一次性处理所有数据。如果可以，采用流（Stream）的方式，或者将大数据集分块，分批拼接和输出。
  2. 使用Blob对象：在浏览器中，如果需要生成一个巨大的文本文件供下载，可以考虑直接使用Blob。

     const hugeStringParts = […]; // 巨大的字符串片段数组 const blob = new Blob(hugeStringParts, { type: ‘text/plain’ }); const url = URL.createObjectURL(blob); // 然后创建一个a标签触发下载

  3. Web Worker：将耗时的字符串处理任务放到Web Worker中，避免阻塞主线程。

4.5 一个容易被忽略的细节：性能测试的误区很多人在做性能测试时，像我们上面那样用console.time在循环里测试。但要注意，JavaScript引擎有即时编译优化。如果测试代码过于简单或可预测，引擎可能会进行激进优化（如提前计算好结果），导致测试结果失真。

更可靠的性能测试应该：

• 使用更真实、不可预测的数据。
• 在函数中封装测试逻辑，避免引擎的全局优化。
• 进行多次测试取平均值，并忽略第一次的“热身”执行。
• 使用专业的性能剖析工具，如 Chrome DevTools 的 Performance 面板或 Node.js 的perf_hooks模块。

字符串拼接，这个看似简单的操作，贯穿了我们开发的每一天。从最初级的+号，到功能强大的模板字符串，再到为性能而生的Array.join()，每种方法都有其存在的理由和最佳舞台。我的经验是，在项目初期就建立良好的字符串操作习惯，比如在循环中坚决使用数组缓存，在UI渲染中优先使用模板字符串，会为项目的长期可维护性和性能打下坚实的基础。记住，代码是写给人看的，偶尔才是写给机器执行的，但在那些机器执行的关键路径上，我们必须为它选择最合适的工具。希望这篇深度解析能帮你彻底掌握这五种方式，在下次敲代码时，能自信地做出最优选择。