字符串拼接有哪些方式？哪种性能好？

在前端开发中，字符串拼接有很多种方式，它们的性能各有优劣。以下列出几种常见的方法，并分析它们的性能：

1. 加号运算符 (+)

这是最简单直观的方法，也是初学者最常用的。

let str1 = "Hello";
let str2 = "World";
let result = str1 + " " + str2; // result = "Hello World"

• 优点: 简单易懂，书写方便。
• 缺点: 性能较差，尤其是在循环中大量拼接字符串时。每次使用 + 都会创建一个新的字符串对象，导致大量的内存分配和垃圾回收，从而影响性能。

2. 模板字面量 (Template Literals) ``

ES6 引入的模板字面量提供了更简洁和易读的字符串拼接方式，也支持嵌入表达式。

let str1 = "Hello";
let str2 = "World";
let result = `${str1} ${str2}`; // result = "Hello World"

• 优点: 语法简洁，可读性强，支持嵌入表达式。
• 缺点: 性能比 + 稍好，但在大量拼接时仍有性能问题，因为它本质上还是会创建多个字符串对象。

3. join() 方法

join() 方法将数组中的所有元素连接成一个字符串。

let arr = ["Hello", " ", "World"];
let result = arr.join(""); // result = "Hello World"

• 优点: 性能较好，尤其是在循环拼接大量字符串时。它避免了频繁创建新的字符串对象，只在最后一次连接操作时创建一个新的字符串。
• 缺点: 需要先将要拼接的字符串放入数组中，稍微增加了一些代码量。

4. Array.prototype.push() 和 join() 的组合

这是性能最佳的方案，尤其适用于在循环中拼接大量字符串的情况。

let arr = [];
for (let i = 0; i < 1000; i++) {
  arr.push("string" + i);
}
let result = arr.join("");

• 优点: 性能最佳，避免了频繁创建字符串对象，内存占用低。
• 缺点: 代码略微复杂一些。

性能总结:

从性能角度来看，推荐使用 join() 方法或 push() 和 join() 的组合，尤其是在处理大量字符串拼接时。+ 和模板字面量虽然方便，但在性能要求较高的场景下应尽量避免。

选择建议:

• 少量字符串拼接: 使用 + 或模板字面量即可，简洁方便。
• 大量字符串拼接: 使用 join() 或 push() 和 join() 的组合，以获得最佳性能。

额外说明:

在现代浏览器中，JavaScript 引擎对字符串拼接进行了一些优化，+ 和模板字面量的性能差距已经不像以前那么明显。但在处理大量字符串拼接时，join() 和 push()/join() 的组合仍然是最佳选择。