it-swarm.com.de

Die effizienteste Möglichkeit, Zeichenfolgen in JavaScript zu verketten?

In JavaScript habe ich eine Schleife mit vielen Iterationen, und in jeder Iteration erstelle ich eine riesige Zeichenfolge mit vielen +=-Operatoren. Gibt es eine effizientere Methode zum Erstellen einer Zeichenfolge? Ich habe darüber nachgedacht, ein dynamisches Array zu erstellen, in dem ich ständig Strings hinzufüge und dann einen Join mache. Kann jemand erklären und ein Beispiel für den schnellsten Weg angeben?

118
omega

Anscheinend basiert auf Benchmarks bei JSPerf , dass die Verwendung von += die schnellste Methode ist, wenn auch nicht unbedingt in jedem Browser.

Um Zeichenfolgen im DOM zu erstellen, ist es scheint besser zu sein , die Zeichenfolge zuerst zu verketten und dann zum DOM hinzuzufügen, anstatt sie iterativ zum dom hinzuzufügen. Sie sollten jedoch Ihren eigenen Fall bewerten.

(Danke @zAlbee für die Korrektur)

109
Jakub Hampl

Ich habe keinen Kommentar zur Verkettung selbst, aber ich möchte auf den Vorschlag von Jakub Hampl hinweisen:

Für das Erstellen von Zeichenfolgen im DOM ist es in manchen Fällen möglicherweise besser, das DOM iterativ hinzuzufügen, anstatt einen großen String auf einmal hinzuzufügen.

ist falsch, weil es auf einem fehlerhaften Test basiert. Dieser Test fügt sich nie in das DOM ein.

Dieser feste Test zeigt, dass das Erstellen der Zeichenfolge auf einmal vor dem Rendern wesentlich schneller ist. Es ist nicht einmal ein Wettbewerb.

(Sorry, dies ist eine separate Antwort, aber ich habe noch nicht genug Vertreter, um Antworten zu kommentieren.)

59
zAlbee

Vor drei Jahren wurde diese Frage beantwortet, aber ich werde sie trotzdem beantworten :)

Eigentlich ist die akzeptierte Antwort nicht vollständig korrekt. Der Jakub-Test verwendet einen hartcodierten String, der es der JS-Engine ermöglicht, die Code-Ausführung zu optimieren (Googles V8 ist wirklich gut in diesem Bereich!). Sobald Sie jedoch völlig zufällige Zeichenfolgen verwenden ( hier ist JSPerf ), wird die Verkettung der Zeichenfolge an zweiter Stelle stehen.

13

Sie können auch string concat mit template literals machen. Ich habe die anderen Poster JSPerf-Tests aktualisiert, um sie aufzunehmen.

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