在 JavaScript 中，我有一个包含多次迭代的循环，并且在每次迭代中，我都会创建一个包含许多 += 运算符的巨大字符串。有没有更有效的方法来创建字符串？我正在考虑创建一个动态数组，在其中不断添加字符串，然后进行连接。任何人都可以解释并举例说明最快的方法吗？
【问题讨论】：
标签： javascript string performance concatenation
似乎基于JSPerf 的基准测试，使用+= 是最快的方法，但不一定适用于所有浏览器。
对于在 DOM 中构建字符串，seems to be better 先将字符串连接起来，然后添加到 DOM，而不是迭代地添加到 dom。不过，您应该对自己的案例进行基准测试。
（感谢@zAlbee 更正）
【讨论】：
+= 和对数组进行连接几乎没有区别。
66%（对于 IE9）比创建一个字符串然后将字符串添加到 DOM 更快。
我对串联本身没有评论，但我想指出@Jakub Hampl 的建议：
对于在 DOM 中构建字符串，在某些情况下，迭代添加到 DOM 可能会更好，而不是一次添加一个巨大的字符串。
是错误的，因为它基于有缺陷的测试。该测试实际上从未附加到 DOM 中。
这个fixed test 表明在渲染之前一次性创建字符串要快得多。这甚至不是比赛。
（抱歉，这是一个单独的答案，但我还没有足够的代表来评论答案。）
【讨论】：
自从这个问题被回答以来已经三年了，但无论如何我都会提供我的答案:)
实际上，接受的答案并不完全正确。 Jakub 的测试使用硬编码字符串，它允许 JS 引擎优化代码执行（Google 的 V8 在这方面真的很不错！）。 但是，一旦您使用完全随机的字符串 (here is JSPerf)，字符串连接就会排在第二位。
【讨论】：
我在 node 和 chrome 中都做了一个快速测试，发现在这两种情况下+= 都更快：
var profile = func => {
var start = new Date();
for (var i = 0; i < 10000000; i++) func('test');
console.log(new Date() - start);
}
profile(x => "testtesttesttesttest");
profile(x => `${x}${x}${x}${x}${x}`);
profile(x => x + x + x + x + x );
profile(x => { var s = x; s += x; s += x; s += x; s += x; return s; });
profile(x => [x, x, x, x, x].join(""));
profile(x => { var a = [x]; a.push(x); a.push(x); a.push(x); a.push(x); return a.join(""); });
节点中的结果：7.0.10
chrome 86.0.4240.198 的结果：
【讨论】：
您也可以使用template literals 进行字符串连接。我更新了其他海报的JSPerf tests 以包含它。
for (var res = '', i = 0; i < data.length; i++) {
res = `${res}${data[i]}`;
}
【讨论】：
我想知道为什么String.prototype.concat 没有得到任何爱。在我的测试中（假设您已经有一个字符串数组），它优于所有其他方法。
测试代码：
const numStrings = 100;
const strings = [...new Array(numStrings)].map(() => Math.random().toString(36).substring(6));
const concatReduce = (strs) => strs.reduce((a, b) => a + b);
const concatLoop = (strs) => {
let result = ''
for (let i = 0; i < strings.length; i++) {
result += strings[i];
}
return result;
}
// Case 1: 52,570 ops/s
concatLoop(strings);
// Case 2: 96,450 ops/s
concatReduce(strings)
// Case 3: 138,020 ops/s
strings.join('')
// Case 4: 169,520 ops/s
''.concat(...strings)
【讨论】：
.join() 还连接了每个字符串之间的（空）分隔符。因此，它可能比.concat() 慢一点，但也更灵活。如果您需要分隔符，.join() 无疑是赢家。
我无法评论其他人的答案（没有足够的代表），所以我会说使用模板文字的MadBreaks' answer 很好，但是如果构建需要与 IE 兼容的网站（Internet资源管理器），因为template literals aren't compatible with IE。因此，在这种情况下，您可以只使用赋值运算符（+、+=）。
【讨论】：