Considera este código:

var age = 3;

console.log("I'm " + age + " years old!");

¿Hay alguna otra forma de insertar el valor de una variable en una cadena, aparte de la concatenación de cadenas?

Desde ES6, puede usar literales de plantilla :

const age = 3
console.log(`I'm ${age} years old!`)

PS Tenga en cuenta el uso de acentos abiertos: ``.

tl; dr

Utilice los Literales de cadena de plantilla de ECMAScript 2015, si corresponde.

Explicación

No hay una forma directa de hacerlo, según las especificaciones de ECMAScript 5, pero ECMAScript 6 tiene cadenas de plantilla , que también se conocían como cuasi literales durante la redacción de la especificación. Úselos así:

> var n = 42;
undefined
> `foo${n}bar`
'foo42bar'

Puede usar cualquier expresión de JavaScript válida dentro de {}. Por ejemplo:

> `foo${{name: 'Google'}.name}bar`
'fooGooglebar'
> `foo${1 + 3}bar`
'foo4bar'

La otra cosa importante es que ya no tiene que preocuparse por las cadenas de varias líneas. Puedes escribirlos simplemente como

> `foo
...     bar`
'foo\n    bar'

Nota: Usé io.js v2.4.0 para evaluar todas las cadenas de plantillas que se muestran arriba. También puede usar el último Chrome para probar los ejemplos que se muestran arriba.

Nota: Las especificaciones ES6 ahora están finalizadas , pero aún no se han implementado en todos los principales navegadores.
De acuerdo con las páginas de Mozilla Developer Network , esto se implementará para soporte básico a partir de las siguientes versiones: Firefox 34, Chrome 41, Internet Explorer 12. Si eres usuario de Opera, Safari o Internet Explorer y tienes curiosidad sobre esto ahora , este banco de pruebas se puede usar para jugar hasta que todos obtengan apoyo para esto.

Remedial JavaScript de Douglas Crockford incluye una String.prototype.supplantfunción. Es breve, familiar y fácil de usar:

String.prototype.supplant = function (o) {
    return this.replace(/{([^{}]*)}/g,
        function (a, b) {
            var r = o[b];
            return typeof r === 'string' || typeof r === 'number' ? r : a;
        }
    );
};

// Usage:
alert("I'm {age} years old!".supplant({ age: 29 }));
alert("The {a} says {n}, {n}, {n}!".supplant({ a: 'cow', n: 'moo' }));

Si no desea cambiar el prototipo de String, siempre puede adaptarlo para que sea independiente, o colocarlo en otro espacio de nombres, o lo que sea.

Advertencia: evite cualquier sistema de plantillas que no le permita escapar de sus propios delimitadores. Por ejemplo, no habría forma de generar lo siguiente utilizando el supplant()método mencionado aquí.

"Tengo 3 años gracias a mi variable {edad}".

La interpolación simple puede funcionar para pequeños scripts autocontenidos, pero a menudo viene con este defecto de diseño que limitará cualquier uso serio. Sinceramente, prefiero las plantillas DOM, como:

<div> I am <span id="age"></span> years old!</div>

Y use la manipulación de jQuery: $('#age').text(3)

Alternativamente, si simplemente está cansado de la concatenación de cadenas, siempre hay una sintaxis alternativa:

var age = 3;
var str = ["I'm only", age, "years old"].join(" ");

Pruebe la biblioteca sprintf (una implementación completa de JavaScript sprintf de código abierto). Por ejemplo:

vsprintf('The first 4 letters of the english alphabet are: %s, %s, %s and %s', ['a', 'b', 'c', 'd']);

vsprintf toma una matriz de argumentos y devuelve una cadena con formato.

Utilizo este patrón en muchos idiomas cuando todavía no sé cómo hacerlo correctamente y solo quiero tener una idea rápidamente:

// JavaScript
let stringValue = 'Hello, my name is {name}. You {action} my {relation}.'
    .replace(/{name}/g    ,'Indigo Montoya')
    .replace(/{action}/g  ,'killed')
    .replace(/{relation}/g,'father')
    ;

Si bien no es particularmente eficiente, me parece legible. Siempre funciona y siempre está disponible:

' VBScript
dim template = "Hello, my name is {name}. You {action} my {relation}."
dim stringvalue = template
stringValue = replace(stringvalue, "{name}"    ,"Luke Skywalker")     
stringValue = replace(stringvalue, "{relation}","Father")     
stringValue = replace(stringvalue, "{action}"  ,"are")

SIEMPRE

* COBOL
INSPECT stringvalue REPLACING FIRST '{name}'     BY 'Grendel'
INSPECT stringvalue REPLACING FIRST '{relation}' BY 'Mother'
INSPECT stringvalue REPLACING FIRST '{action}'   BY 'did unspeakable things to'

Podrías usar el sistema de plantillas de Prototype si realmente quieres usar un mazo para romper una tuerca:

var template = new Template("I'm #{age} years old!");
alert(template.evaluate({age: 21}));

Puede hacerlo fácilmente usando ES6 template stringy transpilar a ES5 usando cualquier transpilar disponible como babel.

const age = 3;

console.log(`I'm ${age} years old!`);

http://www.es6fiddle.net/im3c3euc/

Pruebe kiwi , un módulo JavaScript ligero para la interpolación de cadenas.

Tu puedes hacer

Kiwi.compose("I'm % years old!", [age]);

o

Kiwi.compose("I'm %{age} years old!", {"age" : age});

Si desea interpolar en la console.logsalida, entonces solo

console.log("Eruption 1: %s", eruption1);
                         ^^

Aquí, %ses lo que se llama un "especificador de formato". console.logtiene este tipo de soporte de interpolación incorporado.

Aquí hay una solución que requiere que proporciones un objeto con los valores. Si no proporciona un objeto como parámetro, utilizará variables globales de manera predeterminada. Pero es mejor seguir usando el parámetro, es mucho más limpio.

String.prototype.interpolate = function(props) {
    return this.replace(/\{(\w+)\}/g, function(match, expr) {
        return (props || window)[expr];
    });
};

// Test:

// Using the parameter (advised approach)
document.getElementById("resultA").innerText = "Eruption 1: {eruption1}".interpolate({ eruption1: 112 });

// Using the global scope
var eruption2 = 116;
document.getElementById("resultB").innerText = "Eruption 2: {eruption2}".interpolate();

<div id="resultA"></div><div id="resultB"></div>

Ampliando la segunda respuesta de Greg Kindel , puede escribir una función para eliminar algunas de las repeticiones:

var fmt = {
    join: function() {
        return Array.prototype.slice.call(arguments).join(' ');
    },
    log: function() {
        console.log(this.join(...arguments));
    }
}

Uso:

var age = 7;
var years = 5;
var sentence = fmt.join('I am now', age, 'years old!');
fmt.log('In', years, 'years I will be', age + years, 'years old!');

Te puedo mostrar con un ejemplo:

function fullName(first, last) {
  let fullName = first + " " + last;
  return fullName;
}

function fullNameStringInterpolation(first, last) {
  let fullName = `${first} ${last}`;
  return fullName;
}

console.log('Old School: ' + fullName('Carlos', 'Gutierrez'));

console.log('New School: ' + fullNameStringInterpolation('Carlos', 'Gutierrez'));

Desde ES6, si desea hacer una interpolación de cadenas en claves de objeto, obtendrá un SyntaxError: expected property name, got '${'si hace algo como:

let age = 3
let obj = { `${age}`: 3 }

En su lugar, debe hacer lo siguiente:

let obj = { [`${age}`]: 3 }

Suplante más para la versión ES6 de la publicación de @Chris Nielsen.

String.prototype.supplant = function (o) {
  return this.replace(/\${([^\${}]*)}/g,
    (a, b) => {
      var r = o[b];
      return typeof r === 'string' || typeof r === 'number' ? r : a;
    }
  );
};

string = "How now ${color} cow? {${greeting}}, ${greeting}, moo says the ${color} cow.";

string.supplant({color: "brown", greeting: "moo"});
=> "How now brown cow? {moo}, moo, moo says the brown cow."

El uso de la sintaxis de la plantilla falla en los navegadores más antiguos, importante si está creando HTML para uso público. El uso de la concatenación es tedioso y difícil de leer, especialmente si tiene muchas o largas expresiones, o si debe usar paréntesis para manejar mezclas de elementos de números y cadenas (los cuales usan el operador +).

PHP expande cadenas entre comillas que contienen variables e incluso algunas expresiones usando una notación muy compacta: $a="the color is $color";

En JavaScript, se puede escribir una función eficiente para apoyar esto:, var a=S('the color is ',color);usando un número variable de argumentos. Si bien no hay ninguna ventaja sobre la concatenación en este ejemplo, cuando las expresiones se alargan, esta sintaxis puede ser más clara. O se puede usar el signo de dólar para señalar el inicio de una expresión usando una función de JavaScript, como en PHP.

Por otro lado, escribir una función de solución eficiente para proporcionar una expansión de cadenas similar a una plantilla para navegadores más antiguos no sería difícil. Probablemente alguien ya lo haya hecho.

Finalmente, imagino que sprintf (como en C, C ++ y PHP) podría escribirse en JavaScript, aunque sería un poco menos eficiente que estas otras soluciones.

Interpolación flexible personalizada:

var sourceElm = document.querySelector('input')

// interpolation callback
const onInterpolate = s => `<mark>${s}</mark>`

// listen to "input" event
sourceElm.addEventListener('input', parseInput) 

// parse on window load
parseInput() 

// input element parser
function parseInput(){
  var html = interpolate(sourceElm.value, undefined, onInterpolate)
  sourceElm.nextElementSibling.innerHTML = html;
}

// the actual interpolation 
function interpolate(str, interpolator = ["{{", "}}"], cb){
  // split by "start" pattern
  return str.split(interpolator[0]).map((s1, i) => {
    // first item can be safely ignored
	  if( i == 0 ) return s1;
    // for each splited part, split again by "end" pattern 
    const s2 = s1.split(interpolator[1]);

    // is there's no "closing" match to this part, rebuild it
    if( s1 == s2[0]) return interpolator[0] + s2[0]
    // if this split's result as multiple items' array, it means the first item is between the patterns
    if( s2.length > 1 ){
        s2[0] = s2[0] 
          ? cb(s2[0]) // replace the array item with whatever
          : interpolator.join('') // nothing was between the interpolation pattern
    }

    return s2.join('') // merge splited array (part2)
  }).join('') // merge everything 
}

input{ 
  padding:5px; 
  width: 100%; 
  box-sizing: border-box;
  margin-bottom: 20px;
}

*{
  font: 14px Arial;
  padding:5px;
}

<input value="Everything between {{}} is {{processed}}" />
<div></div>

Si bien las plantillas son probablemente las mejores para el caso que usted describe, si tiene o quiere sus datos y / o argumentos en forma iterativa / matriz, puede usarlos String.raw.

String.raw({
  raw: ["I'm ", " years old!"]
}, 3);

Con los datos como una matriz, se puede usar el operador de propagación:

const args = [3, 'yesterday'];
String.raw({
  raw: ["I'm ", " years old as of ", ""]
}, ...args);

No pude encontrar lo que estaba buscando, luego lo encontré:

Si está utilizando Node.js, hay un utilpaquete integrado con una función de formato que funciona así:

util.format("Hello my name is %s", "Brent");
> Hello my name is Brent

Casualmente, esto también está integrado en console.logsabores en Node.js:

console.log("This really bad error happened: %s", "ReferenceError");
> This really bad error happened: ReferenceError