¿Cómo construir/concatenar cadenas en JavaScript?

6 minutos de lectura

avatar de usuario
mrhaze

¿JavaScript admite la sustitución/interpolación?

Visión general


Estoy trabajando en un proyecto de JS y, a medida que crece, mantener las cadenas en buen estado se vuelve mucho más difícil. Me pregunto cuál es la forma más fácil y convencional de construir cadenas en JavaScript.

Mi experiencia hasta ahora:

La concatenación de cadenas comienza a verse fea y se vuelve más difícil de mantener a medida que el proyecto se vuelve más complejo.

Lo más importante en este punto es la brevedad y la legibilidad, piense en un montón de partes móviles, no solo en 2 o 3 variables.

También es importante que sea compatible con los principales navegadores a partir de hoy (es decir, al menos compatible con ES5).

Soy consciente de la abreviatura de concatenación JS:

var x = 'Hello';
var y = 'world';
console.log(x + ', ' + y);

y de la Cadena.concat función.

Estoy buscando algo un poco más ordenado.

Ruby y Swift lo hacen de una manera interesante.

Rubí

var x = 'Hello'
var y = 'world'
print "#{x}, #{y}"

Rápido

var x = "Hello"
var y = "world"
println("\(x), \(y)")

Estaba pensando que podría haber algo así en JavaScript tal vez algo similar a sprintf.js.

Pregunta


¿Se puede hacer esto sin ninguna biblioteca de terceros? Si no, ¿qué puedo usar?

avatar de usuario
ns.

Con ES6, puede usar

ES5 y por debajo:

  • utilizar el + operador

    var username="craig";
    var joined = 'hello ' + username;
    
  • Instrumentos de cuerda concat(..)

    var username="craig";
    var joined = 'hello '.concat(username);
    

Alternativamente, use métodos de matriz:

  • join(..):

    var username="craig";
    var joined = ['hello', username].join(' ');
    
  • O incluso más elegante, reduce(..) combinado con cualquiera de los anteriores:

    var a = ['hello', 'world', 'and', 'the', 'milky', 'way'];
    var b = a.reduce(function(pre, next) {
      return pre + ' ' + next;
    });
    console.log(b); // hello world and the milky way
    

  • Con las cadenas de plantilla ES6, preste atención al uso de tildes de retroceso (“) en lugar de ” o “” (desarrolladores.google.com/web/updates/2015/01/…)

    – mmago

    9 de octubre de 2017 a las 9:43


  • @MMagician Sí, la primera vez que lo probé me perdí por completo los palos traseros

    –Kellen Stuart

    16 de enero de 2019 a las 23:02

  • Esta respuesta no sugiere “lo mejor”. Entonces, para mí, los dos primeros son muy rápidos y legibles, para decidir revisé cómo lo hacen las grandes empresas y me incliné por Literales de plantilla github.com/airbnb/javascript#es6-template-literals

    – Diego Ortíz

    10 de agosto de 2020 a las 4:44

avatar de usuario
Andrés

Estoy decepcionado de que nadie en las otras respuestas haya interpretado “la mejor manera” como “la manera más rápida” …

Saqué los 2 ejemplos de aquí y agregado str.join() y str.reduce() de la respuesta de nishanths arriba. Aquí están mis resultados en Firefox 77.0.1 en Linux.


Nota: Descubrí mientras probaba estos que si coloco str = str.concat() y str += directamente antes o después del otro, el segundo siempre funciona un poco mejor… Así que realicé estas pruebas individualmente y comenté los resultados de los demás…

Aún asívariaban ampliamente en velocidad si los volví a ejecutar, así que medí 3 veces para cada uno.

1 carácter a la vez:

  • str = str.concat(): 841, 439, 956 ms / 1e7 concat()'s
  • ............str +=: 949, 1130, 664 ms / 1e7 +='s
  • .........[].join(): 3350, 2911, 3522 ms / 1e7 characters in []
  • .......[].reduce(): 3954, 4228, 4547 ms / 1e7 characters in []

Cadena de 26 caracteres a la vez:

  • str = str.concat(): 444, 744, 479 ms / 1e7 concat()'s
  • ............str +=: 1037, 473, 875 ms / 1e7 +='s
  • .........[].join(): 2693, 3394, 3457 ms / 1e7 strings in []
  • .......[].reduce(): 2782, 2770, 4520 ms / 1e7 strings in []

Entonces, independientemente de si agrega 1 carácter a la vez o una cadena de 26 a la vez:

  • Ganador claro: básicamente un empate entre str = str.concat() y str +=
  • Claro perdedor: [].reduce()seguido por [].join()

Mi código, fácil de ejecutar en una consola de navegador:

{
  console.clear();

  let concatMe="a";
  //let concatMe="abcdefghijklmnopqrstuvwxyz";

  //[].join()
  {
    s = performance.now();
    let str="", sArr = [];
    for (let i = 1e7; i > 0; --i) {
      sArr[i] = concatMe;
    }
    str = sArr.join('');
    e = performance.now();
    console.log(e - s);
    console.log('[].join(): ' + str);
  }

  //str +=
  {
    s = performance.now();
    let str="";
    for (let i = 1e7; i > 0; --i) {
      str += concatMe;
    }
    e = performance.now();
    console.log(e - s);
    console.log('str +=: ' + str);
  }

  //[].reduce()
  {
    s = performance.now();
    let str="", sArr = [];
    for (let i = 1e7; i > 0; --i) {
      sArr[i] = concatMe;
    }
    str = sArr.reduce(function(pre, next) {
      return pre + next;
    });
    e = performance.now();
    console.log(e - s);
    console.log('[].reduce(): ' + str);
  }

  //str = str.concat()
  {
    s = performance.now();
    let str="";
    for (let i = 1e7; i > 0; --i) {
      str = str.concat(concatMe);
    }
    e = performance.now();
    console.log(e - s);
    console.log('str = str.concat(): ' + str);
  }

  'Done';
}

  • Estoy obteniendo resultados similares. ''.concat(...strings) está superando constantemente a todos los demás métodos. Me pregunto por qué no está recibiendo el amor que se merece.

    – grupo

    28 de noviembre de 2020 a las 9:12


var descriptor="awesome";
console.log(`ES6 is ${descriptor}!`);

Más: https://developers.google.com/web/updates/2015/01/ES6-Template-Strings?hl=en

  • ¡Ojalá esto hubiera funcionado genial!, pero solo es compatible con Chrome en este momento: L Gran respuesta, sin embargo 🙂

    – Señor Haze

    6 de agosto de 2015 a las 2:41

  • Y Firefox, y Opera. 🙂 Simplemente no IE o Safari.

    – Rowland

    6 de agosto de 2015 a las 2:43

  • A partir de ahora (marzo de 2020), ES6 es compatible con todos los navegadores principales, por lo que puede usarlo libremente excepto si necesita admitir navegadores antiguos, desactualizados y terribles (en otras palabras, Internet Explorer)

    –Rory McCrossan

    18 de marzo de 2020 a las 11:30

pienso reemplazar() merece mencionarse aquí.

Durante algunas condiciones, el método de reemplazo puede servirle bien al construir cadenas. Específicamente, obviamente, cuando inyectas una parte dinámica en una cadena estática. Ejemplo:

var s="I am {0} today!";
var result = s.replace('{0}', 'hungry');
// result: 'I am hungry today!'

El marcador de posición que se va a reemplazar obviamente puede ser cualquier cosa. Uso “{0}”, “{1}”, etc. por costumbre de C#. Solo debe ser lo suficientemente único como para no aparecer en la cadena en otro lugar que no sea el previsto.

Entonces, siempre que podamos jugar un poco con las partes de la cadena, el ejemplo de OP también podría resolverse así:

var x = 'Hello {0}';
var y = 'World';
var result = x.replace('{0}', y);
// result: 'Hello World'. -Oh the magic of computing!

Referencia para “reemplazar”:
https://www.w3schools.com/jsreF/jsref_replace.asp

Podrías usar el concat función.

var hello = "Hello ";
var world = "world!";
var res = hello.concat(world);

  • Si quisiera construir una cadena mucho más larga, digamos con 6 partes móviles diferentes, no sería legible en absoluto con la función concat.

    – Señor Haze

    6 de agosto de 2015 a las 2:37

  • Si hello no tenía el espacio final, ¿cómo lograría todo en la misma línea? hello.concat(world.concat(' '));? ¿O seguirías usando la abreviatura y harías hello.concat(' ' + world)?

    – Singular1ty

    6 de agosto de 2015 a las 2:37


  • @MrHaze concat toma un número variable de argumentos. Así que tal vez, str1.concat.apply(null, [str2, str3, str4]) mejora ligeramente la legibilidad?

    – ns.

    6 de agosto de 2015 a las 3:20

  • str1.concat.apply(null, [str2, str3, str4]) <-- ¿cómo se compara el rendimiento de esto con el uso [...].unirse('')?

    –Mike Stoddart

    29 de enero de 2018 a las 16:51

  • @MikeStoddart probablemente llegue muy tarde para responder a esta, pero como dice la otra respuesta en esta publicación, […].join y .reduce son muy lentos para la concatenación de cadenas en comparación con .concat, sin embargo, agregaría que la nueva forma ES6 con interpolación de cadenas (hello there ${name}) es mucho más limpio y también muy eficaz

    – Lucas_

    18 de febrero de 2021 a las 16:06

avatar de usuario
Bla…

podrías usar Caféscriptestá hecho para hacer que el código javascript sea más conciso. Para la concatenación de cadenas, podría hacer algo como esto:

first_name = "Marty"
full_name = "#{first_name} McFly"
console.log full_name

Tal vez puedas empezar aquí para ver lo que ofrece coffescript..

  • Si quisiera construir una cadena mucho más larga, digamos con 6 partes móviles diferentes, no sería legible en absoluto con la función concat.

    – Señor Haze

    6 de agosto de 2015 a las 2:37

  • Si hello no tenía el espacio final, ¿cómo lograría todo en la misma línea? hello.concat(world.concat(' '));? ¿O seguirías usando la abreviatura y harías hello.concat(' ' + world)?

    – Singular1ty

    6 de agosto de 2015 a las 2:37


  • @MrHaze concat toma un número variable de argumentos. Así que tal vez, str1.concat.apply(null, [str2, str3, str4]) mejora ligeramente la legibilidad?

    – ns.

    6 de agosto de 2015 a las 3:20

  • str1.concat.apply(null, [str2, str3, str4]) <-- ¿cómo se compara el rendimiento de esto con el uso [...].unirse('')?

    –Mike Stoddart

    29 de enero de 2018 a las 16:51

  • @MikeStoddart probablemente llegue muy tarde para responder a esta, pero como dice la otra respuesta en esta publicación, […].join y .reduce son muy lentos para la concatenación de cadenas en comparación con .concat, sin embargo, agregaría que la nueva forma ES6 con interpolación de cadenas (hello there ${name}) es mucho más limpio y también muy eficaz

    – Lucas_

    18 de febrero de 2021 a las 16:06

avatar de usuario
hemant rao

**Top 3 Practical Ways to Perform Javascript String Concatenation**

1) Using the concat() method

let list = ['JavaScript',' ', 'String',' ', 'Concatenation'];
let result="".concat(...list);

console.log(result);

Output:
JavaScript String Concatenation

2) Using the + and += operators

    enter code here

The operator + allows you to concatenate two strings. 
For example:
let lang = 'JavaScript';
let result = lang + ' String';


console.log(result);
Output: JavaScript String


3) Using template literals`enter code here`

ES6 introduces the template literals that allow you to perform string interpolation.
The following example shows how to concatenate three strings:

let navbarClass="navbar";
let primaryColor="primary-color";
let stickyClass="sticky-bar";

let className = `${navbarClass} ${primaryColor} ${stickyClass}`;

console.log(className);

Output: navbar primary-color stickyBar

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad