JavaScriptで文字列を連結する最も効率的な方法は？

Question

JavaScriptには、多数の反復があるループがあり、各反復で、多くの+=演算子で巨大な文字列を作成しています。文字列を作成するより効率的な方法はありますか？文字列を追加してから結合を行う動的配列を作成することを考えていました。誰でもこれを行う最も速い方法の説明と例を与えることができますか？

Answer 1

JSPerf のベンチマークに基づいているようです。+=を使用するのが最速の方法ですが、必ずしもすべてのブラウザーで必要なわけではありません。

DOMで文字列を構築するには、まず文字列を連結してからDOMに追加し、それをdomに繰り返し追加するのではなく、 より良いと思われる にします。ただし、独自のケースをベンチマークする必要があります。

（修正のために@zAlbeeに感謝）

Answer 2

連結自体についてはコメントしていませんが、@ Jakub Hamplの提案を指摘したいと思います。

DOMで文字列を構築する場合、場合によっては、一度に巨大な文字列を追加するよりも、DOMに繰り返し追加する方が良い場合があります。

それは間違ったテストに基づいているためです。そのテストが実際にDOMに追加されることはありません。

この 修正済みテスト は、文字列をレンダリングする前に一度に作成すると、はるかに高速になることを示しています。コンテストでもありません。

（申し訳ありませんが、これは別の回答ですが、回答についてコメントするのに十分な担当者がまだいません。）

Answer 3

この質問が回答されてから3年が経過しましたが、とにかく回答します:)

実際、受け入れられた答えは完全に正しいわけではありません。 Jakubのテストでは、ハードコーディングされた文字列を使用して、JSエンジンがコード実行を最適化できるようにします（Google V8はこの点で非常に優れています！）。しかし、完全にランダムな文字列（ ここはJSPerf ）を使用するとすぐに、文字列の連結が2番目になります。

Answer 4

template literals で文字列連結を行うこともできます。他のポスターの JSPerfテスト を更新して追加しました。

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