在 JavaScript 中串联字符串的最有效方法是什么？

在 JavaScript 中，我有一个有许多迭代的循环，并且在每次迭代中，我创建了一个包含许多 +=操作符的巨大字符串。有没有更有效的方法来创建字符串？我在考虑创建一个动态数组，在其中不断添加字符串，然后执行连接。有人能解释一下，并给出一个最快的方法做到这一点的例子吗？

152399 次浏览
小开
最佳答案

根据 JSPerf的基准测试，使用 +=是最快的方法，尽管不一定在每个浏览器中都是如此。

为了在 DOM 中构建字符串，首先将字符串连接起来，然后添加到 DOM 中，而不是迭代地将其添加到 DOM 中。不过，你应该对自己的案例进行基准测试。

(谢谢@zAlbee 纠正)

小开

我对连接本身没有评论，但我想指出@Jakub Hampl 的建议:

对于在 DOM 中构建字符串，在某些情况下最好迭代地添加到 DOM 中，而不是一次添加一个巨大的字符串。

是错误的，因为它是基于一个有缺陷的测试。该测试实际上从来没有附加到 DOM。

这个 固定测试固定测试固定测试表明，在呈现字符串之前一次性创建字符串要快得多。这根本不是比赛。

(对不起，这是一个独立的答案，但我还没有足够的名声来评论答案。)

小开

这个问题已经过去三年了，但我还是要给出我的答案:)

事实上，公认的答案并不完全正确。Jakub 的测试使用了硬编码字符串，它允许 JS 引擎优化代码执行(Google 的 V8在这方面真的很棒!). 但是一旦您使用完全随机的字符串(这是 JSPerf) ，那么字符串串联将位于第二位。

小开

你也可以做字符串连接与 模板文字。我更新了其他海报的 JSPerf 测试，以包括它。

for (var res = '', i = 0; i < data.length; i++) {
res = `${res}${data[i]}`;
}
小开

我对 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

  • 任务: 8
  • 模板文字: 524
  • + : 382
  • 加上等于: 379
  • 数组连接: 1476
  • 数组推送连接: 1651

结果来自 chrome 86.0.4240.198:

  • 任务: 6
  • 模板文字: 531
  • + : 406
  • 加上等于: 403
  • 数组连接: 1552
  • 数组推送连接: 1813
小开

我想知道为什么 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)

小开

我不能评论其他人的回答(没有足够的代表性) ，所以我会说使用模板文字的 MadBreaks 的回答是好的，但是如果建立一个网站需要与 IE (Internet Explorer)兼容，应该小心，因为 模板文字与 IE 不兼容。因此，在这种情况下，可以只使用赋值运算符(+ ，+ =)。


提交答案