¿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?

Con ES6, puede usar

• Cadenas de plantilla:

  var username="craig";
  console.log(`hello ${username}`);
  

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
  

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';
}

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

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

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);

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..

**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