Je vois quelques solutions de projet de code .
Mais existe-t-il une implémentation régulière en JavaScript?
Si vous devez écrire du code pour Internet Explorer, assurez-vous de choisir une implémentation utilisant des jointures de tableau. La concaténation de chaînes avec l'opérateur +
ou +=
est extrêmement lente sous IE. Cela est particulièrement vrai pour IE6. Sur les navigateurs modernes, +=
est généralement aussi rapide que les jointures de tableaux.
Lorsque je dois faire beaucoup de concaténations de chaînes, je remplis généralement un tableau et n'utilise pas de classe constructeur de chaînes:
var html = [];
html.Push(
"<html>",
"<body>",
"bla bla bla",
"</body>",
"</html>"
);
return html.join("");
Notez que les méthodes Push
acceptent plusieurs arguments.
Je viens de revérifier la performance sur http://jsperf.com/javascript-concat-vs-join/2 . Les cas de test concaténent ou rejoignent l'alphabet 1 000 fois.
Dans les navigateurs actuels (FF, Opera, IE11, Chrome), "concat" est environ 4 à 10 fois plus rapide que "rejoindre".
Dans IE8, les deux retournent des résultats à peu près égaux.
Dans IE7, "rejoindre" est malheureusement environ 100 fois plus rapide.
Non, il n'y a pas de support intégré pour la construction de chaînes. Vous devez utiliser la concaténation à la place.
Vous pouvez bien sûr créer un tableau de différentes parties de votre chaîne, puis appeler join()
sur ce tableau, mais cela dépend de la manière dont la jointure est implémentée dans l'interpréteur JavaScript que vous utilisez.
J'ai fait une expérience pour comparer la vitesse de la méthode str1+str2
à la méthode array.Push(str1, str2).join()
. Le code était simple:
var iIterations =800000;
var d1 = (new Date()).valueOf();
str1 = "";
for (var i = 0; i<iIterations; i++)
str1 = str1 + Math.random().toString();
var d2 = (new Date()).valueOf();
log("Time (strings): " + (d2-d1));
var d3 = (new Date()).valueOf();
arr1 = [];
for (var i = 0; i<iIterations; i++)
arr1.Push(Math.random().toString());
var str2 = arr1.join("");
var d4 = (new Date()).valueOf();
log("Time (arrays): " + (d4-d3));
Je l'ai testé sous Internet Explorer 8 et Firefox 3.5.5, tous deux sous Windows 7 x64.
Au début, j'ai testé sur un petit nombre d'itérations (quelques centaines, quelques milliers d'éléments). Les résultats étaient imprévisibles (la concaténation de chaînes prenait parfois 0 millisecondes, parfois 16 millisecondes, la même chose pour la jonction de tableaux).
Lorsque j'ai augmenté le nombre à 50 000, les résultats étaient différents selon les navigateurs. Dans Internet Explorer, la concaténation des chaînes était plus rapide (94 millisecondes) et la jointure était plus lente (125 millisecondes), tandis que dans Firefox, la jointure du tableau était plus rapide (113 millisecondes). jonction de chaîne (117 millisecondes).
Puis j'ai augmenté le nombre à 500'000. Désormais, array.join()
était plus lent que la concaténation de chaînes dans les deux navigateurs: la concaténation de chaînes était de 937 ms dans Internet Explorer, de 1155 ms dans Firefox, de 1200 dans Internet Explorer et 1207 ms dans Firefox.
Le nombre maximum d'itérations que j'ai pu tester dans Internet Explorer sans avoir "le script prend trop de temps à exécuter" était de 850 000. Internet Explorer était alors 1593 pour la concaténation de chaînes et 2046 pour la jointure de tableaux, et Firefox pour 2101 pour la concaténation de chaînes et 2249 pour la jointure de tableaux.
Résultats - Si le nombre d'itérations est faible, vous pouvez essayer d'utiliser array.join()
, car cela pourrait être plus rapide dans Firefox. Lorsque le nombre augmente, la méthode string1+string2
est plus rapide.
J'ai effectué le test sur Internet Explorer 6 (Windows XP). Le processus s'est arrêté pour répondre immédiatement et n'a jamais pris fin si j'ai essayé le test sur plus de 100 000 itérations . Sur 40 000 itérations, les résultats ont été
Time (strings): 59175 ms
Time (arrays): 220 ms
Cela signifie que si vous devez prendre en charge Internet Explorer 6, choisissez array.join()
, ce qui est beaucoup plus rapide que la concaténation de chaînes.
La version ECMAScript 6 (ou ECMAScript 2015) de JavaScript introduit littéraux de chaîne .
var classType = "stringbuilder";
var q = `Does JavaScript have a built-in ${classType} class?`;
Notez que les guillemets, au lieu de guillemets simples, entourent la chaîne.
Ce code ressemble à l'itinéraire que vous souhaitez suivre avec quelques modifications.
Vous voudrez changer la méthode append pour ressembler à ceci. Je l'ai changé pour accepter le nombre 0 et pour le renvoyer this
afin que vous puissiez chaîner vos ajouts.
StringBuilder.prototype.append = function (value) {
if (value || value === 0) {
this.strings.Push(value);
}
return this;
}
En C #, vous pouvez faire quelque chose comme
String.Format("hello {0}, your age is {1}.", "John", 29)
En JavaScript, vous pouvez faire quelque chose comme
var x = "hello {0}, your age is {1}";
x = x.replace(/\{0\}/g, "John");
x = x.replace(/\{1\}/g, 29);
J'ai défini cette fonction:
function format() {
var args = arguments;
if (args.length <= 1) {
return args;
}
var result = args[0];
for (var i = 1; i < args.length; i++) {
result = result.replace(new RegExp("\\{" + (i - 1) + "\\}", "g"), args[i]);
}
return result;
}
Et peut être appelé comme c #:
var text = format("hello {0}, your age is {1}.", "John", 29);
Résultat:
bonjour John, vous avez 29 ans.
Pour ceux que cela intéresse, voici une alternative à l'invocation de Array.join:
var arrayOfStrings = ['foo', 'bar'];
var result = String.concat.apply(null, arrayOfStrings);
console.log(result);
Comme attendu, la sortie est la chaîne 'foobar'. Dans Firefox, cette approche surpasse Array.join, mais elle est surperformée par la concaténation. Comme String.concat exige que chaque segment soit spécifié en tant qu'argument séparé, l'appelant est limité par toute limite de nombre d'arguments imposée par le moteur JavaScript en cours d'exécution. Consultez la documentation de Function.prototype.apply () pour plus d'informations.
Lorsque je me trouve à faire beaucoup de concaténation de chaînes en JavaScript, je commence à rechercher des modèles. Handlebars.js fonctionne assez bien en gardant le HTML et le JavaScript plus lisibles. http://handlebarsjs.com
Que diriez-vous de sys.StringBuilder()
essayez l'article suivant.