¿La forma más eficiente de concatenar cadenas en JavaScript?
En JavaScript, tengo un bucle que tiene muchas iteraciones y, en cada iteración, creo una cadena enorme con muchos +=operadores. ¿Existe una forma más eficiente de crear una cadena? Estaba pensando en crear una matriz dinámica en la que sigo agregando cadenas y luego hago una unión. ¿Alguien puede explicar y dar un ejemplo de la forma más rápida de hacer esto?
Según los puntos de referencia de JSPerf , parece que utilizarlo +=es el método más rápido, aunque no necesariamente en todos los navegadores.
Para crear cadenas en el DOM, parece ser mejor concatenar la cadena primero y luego agregarla al DOM, en lugar de agregarla iterativamente al DOM. Sin embargo, deberías comparar tu propio caso.
(Gracias @zAlbee por la corrección)
No tengo ningún comentario sobre la concatenación en sí, pero me gustaría señalar que la sugerencia de @Jakub Hampl:
Para crear cadenas en el DOM, en algunos casos podría ser mejor agregarlas de forma iterativa al DOM, en lugar de agregar una cadena enorme a la vez.
está mal porque se basa en una prueba defectuosa. En realidad, esa prueba nunca se agrega al DOM.
Esta prueba fija muestra que crear la cadena de una vez antes de renderizarla es mucho, MUCHO más rápido. Ni siquiera es un concurso.
(Lo siento, esta es una respuesta separada, pero todavía no tengo suficiente representante para comentar las respuestas).
Han pasado tres años desde que se respondió esta pregunta, pero daré mi respuesta de todos modos :)
En realidad, la respuesta aceptada no es del todo correcta. La prueba de Jakub utiliza una cadena codificada que permite al motor JS optimizar la ejecución del código (¡el V8 de Google es realmente bueno en estas cosas!). Pero tan pronto como use cadenas completamente aleatorias ( aquí está JSPerf ), la concatenación de cadenas pasará a un segundo lugar.
Hice una prueba rápida tanto en Node como en Chrome y descubrí que en ambos casos +=es más rápido:
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(""); });
resultados en el nodo: 7.0.10
- tarea: 8
- literales de plantilla: 524
- más: 382
- más es igual a: 379
- unión de matriz: 1476
- unión push de matriz: 1651
resultados de chrome 86.0.4240.198:
- tarea: 6
- literales de plantilla: 531
- más: 406
- más es igual a: 403
- unión de matriz: 1552
- unión push de matriz: 1813
