在JavaScript中连接字符串的最有效方法？

Question

在JavaScript中,我有一个循环,有许多迭代,并在每次迭代中,我创建一个包含许多+=运算符的巨大字符串.有没有更有效的方法来创建一个字符串？我正在考虑创建一个动态数组,我不断添加字符串,然后进行连接.任何人都可以解释并举例说明最快的方法吗？

Answer 1

似乎基于JSPerf的基准测试,使用+=是最快的方法,但不一定在每个浏览器中.

为了在DOM中构建字符串,最好先连接字符串然后再添加到DOM,而不是迭代地将它添加到dom中.你应该对自己的情况进行基准测试.

(谢谢@zAlbee纠正)

Answer 2

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

为了在DOM中构建字符串,在某些情况下,迭代地添加到DOM可能会更好,而不是一次添加一个巨大的字符串.

这是错误的,因为它是基于一个有缺陷的测试.该测试从未实际附加到DOM中.

这个固定的测试显示在渲染之前一次创建字符串的速度要快得多.这甚至不是一场比赛.

(对不起,这是一个单独的答案,但我还没有足够的代表对答案发表评论.)

Answer 3

自这个问题得到回答三年后,我仍然会提供我的答案:)

实际上,接受的答案并不完全正确.Jakub的测试使用硬编码字符串,允许JS引擎优化代码执行(谷歌的V8在这方面非常好!).但是只要你使用完全随机的字符串(这里是JSPerf),字符串连接就会在第二位.

Answer 4

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

Answer 5

您也可以使用模板文字进行字符串连接。我更新了其他发布者的JSPerf测试以包括其中。

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

Answer 6

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