web-dev-qa-db-fra.com

Le moyen le plus efficace de concaténer des chaînes en JavaScript?

En JavaScript, j'ai une boucle comportant de nombreuses itérations et, à chaque itération, je crée une énorme chaîne avec de nombreux opérateurs +=. Existe-t-il un moyen plus efficace de créer une chaîne? Je pensais à la création d'un tableau dynamique dans lequel j'ajoute des chaînes, puis une jointure. Quelqu'un peut-il expliquer et donner un exemple du moyen le plus rapide de le faire?

118
omega

Il semble basé sur des points de repère à JSPerf que l'utilisation de += est la méthode la plus rapide, bien que pas nécessairement dans tous les navigateurs.

Pour construire des chaînes dans le DOM, il semble être préférable de concaténer la chaîne en premier lieu, puis de l'ajouter au DOM, plutôt que de l'ajouter de manière itérative au dom. Vous devez cependant analyser votre propre cas.

(Merci @zAlbee pour la correction)

123
Jakub Hampl

Je ne commente pas la concaténation elle-même, mais j'aimerais souligner la suggestion de @Jakub Hampl:

Pour construire des chaînes dans le DOM, dans certains cas, il peut être préférable d’ajouter de manière itérative au DOM, plutôt que d’ajouter une énorme chaîne à la fois.

est faux, car il est basé sur un test imparfait. Ce test ne s’ajoute jamais réellement dans le DOM.

Ce test fixed montre que la création de la chaîne en une fois avant de la rendre est beaucoup, BEAUCOUP plus rapide. Ce n'est même pas un concours.

(Désolé, ceci est une réponse séparée, mais je n'ai pas assez de représentant pour commenter les réponses pour le moment.)

59
zAlbee

Cela fait trois ans que cette question a reçu une réponse, mais je vais quand même répondre: :)

En fait, la réponse acceptée n'est pas tout à fait correcte. Le test de Jakub utilise une chaîne codée en dur qui permet au moteur JS d'optimiser l'exécution du code (le V8 de Google est vraiment bon dans ce domaine!). Mais dès que vous utilisez des chaînes complètement aléatoires ( ici, JSPerf ), la concaténation des chaînes occupe une deuxième place.

13

Vous pouvez également faire concatter des chaînes avec template literals . J'ai mis à jour les tests des autres affiches JSPerf pour l'inclure.

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