De meest efficiënte manier om strings in JavaScript samen te voegen?

In JavaScript heb ik een lus met veel herhalingen, en in elke herhaling maak ik een enorme reeks met veel +=-operators. Is er een efficiëntere manier om een ​​string te maken? Ik zat te denken aan het maken van een dynamische array waar ik strings aan blijf toevoegen en vervolgens een join doe. Kan iemand uitleggen en een voorbeeld geven van de snelste manier om dit te doen?

Antwoord 1, autoriteit 100%

Het lijkt gebaseerd op benchmarks op JSPerfdat het gebruik van +=de snelste methode, maar niet noodzakelijk in elke browser.

Voor het bouwen van strings in de DOM, lijkt het beterom de string samen te voegen eerst en voeg het dan toe aan de DOM, in plaats van het iteratief toe te voegen aan de dom. U moet echter uw eigen zaak benchmarken.

(Bedankt @zAlbee voor de correctie)

Antwoord 2, autoriteit 56%

Ik heb geen commentaar op de aaneenschakeling zelf, maar ik wil erop wijzen dat de suggestie van @Jakub Hampl:

Voor het bouwen van strings in de DOM is het in sommige gevallen misschien beter om iteratief toe te voegen aan de DOM, in plaats van een enorme string in één keer toe te voegen.

is verkeerd, omdat het gebaseerd is op een gebrekkige test. Die test wordt eigenlijk nooit toegevoegd aan de DOM.

Deze vaste testlaat zien dat het veel, VEEL sneller is om de string in één keer te maken voordat deze wordt gerenderd. Het is niet eens een wedstrijd.

(Sorry, dit is een apart antwoord, maar ik heb nog niet genoeg vertegenwoordigers om op antwoorden te reageren.)

Antwoord 3, autoriteit 11%

Het is drie jaar geleden dat deze vraag werd beantwoord, maar ik zal toch mijn antwoord geven 🙂

Eigenlijk is het geaccepteerde antwoord niet helemaal correct. De test van Jakub maakt gebruik van een hardcoded string waarmee de JS-engine de uitvoering van de code kan optimaliseren (Google’s V8 is hier echt goed in!).
Maar zodra je volledig willekeurige strings gebruikt (hier is JSPerf), dan zal stringconcatenatie op een tweede plaats.

Antwoord 4, autoriteit 8%

Ik heb een snelle test gedaan in zowel node als chrome en vond in beide gevallen +=sneller is:

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(""); });

resulteert in knooppunt: 7.0.10

• opdracht: 8
• lettertalen van sjabloon: 524
• plus: 382
• plus is gelijk aan: 379
• array-join: 1476
• array push-join: 1651

resultaten van chrome 86.0.4240.198:

• opdracht: 6
• lettertalen van sjabloon: 531
• plus: 406
• plus is gelijk aan: 403
• array-join: 1552
• array push-join: 1813

Antwoord 5, autoriteit 5%

Je kunt ook string concat doen met sjabloonletterwoorden. Ik heb de JSPerf-testsvan de andere posters bijgewerkt om deze op te nemen.

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

Antwoord 6, autoriteit 3%

Ik vraag me af waarom String.prototype.concatkrijgt geen liefde. In mijn tests (ervan uitgaande dat je al een reeks strings hebt), presteert het beter dan alle andere methoden.

perf.link proef

Testcode:

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)

Antwoord 7

Ik kan geen commentaar geven op de antwoorden van anderen (niet genoeg rep.), dus ik zeg Het antwoord van MadBreaksop het gebruik van sjabloonletters is goed, maar wees voorzichtig bij het bouwen van een site die compatibel moet zijn met IE (Internet Explorer), omdat sjabloonliteralen zijn niet compatibel met IE. Dus in dat geval kun je alleen toewijzingsoperatoren (+, +=) gebruiken.