Problèmes de concaténation de chaînes en JavaScript (tutoriel graphique)

Cet article présente principalement le problème de connexion de chaîne dans JS. L'un des problèmes les plus courants dans ECMAScript est la performance de la connexion de chaîne. L'opération de connexion ne se produira que lorsque la méthode join() sera appelée. Vous pouvez consulter l'explication détaillée ci-dessous pour les étapes spécifiques de l'opération. Les amis intéressés peuvent s'y référer.

L'un des problèmes les plus courants dans ECMAScript est la performance de la concaténation de chaînes. Semblable à d'autres langages, les chaînes ECMAScript sont immuables, c'est-à-dire que leurs valeurs ne peuvent pas être modifiées. Considérez le code suivant :

var str = "hello ";
str += "world";

En fait, ce que ce code fait en coulisses est le suivant :

1. La chaîne "bonjour".
2. Créez une chaîne pour stocker "world".
3. Créez une chaîne pour stocker le résultat de la connexion.
4. Copiez le contenu actuel de str dans le résultat.
5. Copiez « monde » dans le résultat.
6. Mettez à jour str pour qu'il pointe vers le résultat.

Les étapes 2 à 6 sont effectuées à chaque fois que la concaténation de chaînes est terminée, ce qui rend cette opération très gourmande en ressources. Si ce processus est répété des centaines, voire des milliers de fois, cela peut entraîner des problèmes de performances. La solution consiste à utiliser un objet Array pour stocker la chaîne, puis à utiliser la méthode join() (le paramètre est une chaîne vide) pour créer la chaîne finale. Imaginez remplacer le code précédent par le code suivant :

var arr = new Array();
arr[0] = "hello ";
arr[1] = "world";
var str = arr.join("");

De cette façon, peu importe le nombre de chaînes introduites dans le tableau, ce ne sera pas un problème, car seule la méthode join() se produira uniquement. À ce stade, les étapes sont les suivantes :
1. Créez une chaîne pour stocker le résultat
2. Copiez chaque chaîne à l'emplacement approprié dans le résultat

Bien que cette solution soit bonne, mais il existe une meilleure façon. Le problème est que ce code ne reflète pas exactement ce qu’il est censé faire. Pour faciliter la compréhension, vous pouvez envelopper cette fonctionnalité avec la classe StringBuffer :

function StringBuffer () {
 this._strings_ = new Array();
}
StringBuffer.prototype.append = function(str) {
 this._strings_.push(str);
};
StringBuffer.prototype.toString = function() {
 return this._strings_.join("");
};

La première chose à noter dans ce code est l'attribut strings , qui est censée être une propriété privée. Il n’a que deux méthodes, à savoir les méthodes append() et toString(). La méthode append() a un paramètre qui ajoute le paramètre au tableau de chaînes. La méthode toString() appelle la méthode join du tableau et renvoie la chaîne concaténée réelle. Pour concaténer un ensemble de chaînes avec un objet StringBuffer, vous pouvez utiliser le code suivant :

var buffer = new StringBuffer ();
buffer.append("hello ");
buffer.append("world");
var result = buffer.toString();

Vous pouvez tester les objets StringBuffer et la concaténation de chaînes traditionnelle avec le code suivant Performance de la méthode :

var d1 = new Date();
var str = "";
for (var i=0; i < 10000; i++) {
 str += "text";
}
var d2 = new Date();
document.write("Concatenation with plus: "
 + (d2.getTime() - d1.getTime()) + " milliseconds");
var buffer = new StringBuffer();
d1 = new Date();
for (var i=0; i < 10000; i++) {
 buffer.append("text");
}
var result = buffer.toString();
d2 = new Date();
document.write("<br />Concatenation with StringBuffer: "
 + (d2.getTime() - d1.getTime()) + " milliseconds");

Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère qu'il sera utile à. tout le monde dans le futur.

Articles connexes :

Quelles sont les erreurs courantes commises par les utilisateurs novices de JS

Résumé des conseils d'utilisation de JS EventEmitter

Utiliser JS pour le déplacement de fichiers

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!