Considere este código:

var age = 3;

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

Existem outras maneiras de inserir o valor de uma variável em uma string, além da concatenação da string?

Desde o ES6, você pode usar literais de modelo :

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

PS Observe o uso de acentos graves: ``.

tl; dr

Use literais de cadeia de modelo do ECMAScript 2015, se aplicável.

Explicação

Não existe uma maneira direta de fazer isso, de acordo com as especificações do ECMAScript 5, mas o ECMAScript 6 possui seqüências de modelos , que também eram conhecidas como quase literais durante a elaboração da especificação. Use-os assim:

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

Você pode usar qualquer expressão JavaScript válida dentro do {}. Por exemplo:

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

A outra coisa importante é que você não precisa mais se preocupar com cadeias de linhas múltiplas. Você pode escrevê-los simplesmente como

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

Nota: Eu usei o io.js v2.4.0 para avaliar todas as sequências de modelos mostradas acima. Você também pode usar o Chrome mais recente para testar os exemplos mostrados acima.

Nota: As especificações ES6 agora estão finalizadas , mas ainda precisam ser implementadas por todos os principais navegadores.
De acordo com as páginas da Mozilla Developer Network , isso será implementado para suporte básico a partir das seguintes versões: Firefox 34, Chrome 41, Internet Explorer 12. Se você é um usuário do Opera, Safari ou Internet Explorer e está curioso sobre isso agora , essa bancada de testes pode ser usada para brincar até que todos obtenham suporte para isso.

O Remedial JavaScript de Douglas Crockford inclui uma String.prototype.supplantfunção. É curto, familiar e 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' }));

Se você não quiser alterar o protótipo de String, sempre poderá adaptá-lo para ser autônomo ou colocá-lo em outro espaço para nome, ou o que for.

Palavra de cautela: evite qualquer sistema de modelos que não permita que você escape de seus próprios delimitadores. Por exemplo, não haveria como gerar o seguinte usando o supplant()método mencionado aqui.

"Tenho 3 anos de idade graças à minha variável {age}."

A interpolação simples pode funcionar para pequenos scripts independentes, mas geralmente vem com essa falha de design que limitará qualquer uso sério. Sinceramente, prefiro modelos DOM, como:

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

E use a manipulação do jQuery: $('#age').text(3)

Como alternativa, se você simplesmente está cansado da concatenação de strings, sempre há uma sintaxe alternativa:

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

Experimente a biblioteca sprintf (uma implementação completa do sprintf JavaScript de código aberto). Por exemplo:

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

vsprintf pega uma matriz de argumentos e retorna uma string formatada.

Eu uso esse padrão em vários idiomas quando ainda não sei como fazê-lo corretamente e só quero ter uma ideia rapidamente:

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

Embora não seja particularmente eficiente, acho legível. Sempre funciona, e está sempre disponível:

' 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")

SEMPRE

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

Você poderia usar o sistema de modelos do Prototype se realmente sentir vontade de usar uma marreta para quebrar uma noz:

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

Você pode fazer isso facilmente usando o ES6 template stringe transpilar para o ES5 usando qualquer transpilar disponível como o babel.

const age = 3;

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

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

Experimente o kiwi , um módulo JavaScript leve para interpolação de strings.

Você pode fazer

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

ou

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

Se você deseja interpolar na console.logsaída, basta

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

Aqui %sestá o que é chamado de "especificador de formato". console.logtem esse tipo de suporte de interpolação embutido.

Aqui está uma solução que requer que você forneça um objeto com os valores. Se você não fornecer um objeto como parâmetro, o padrão será usar variáveis ​​globais. Mas é melhor usar o parâmetro, é muito mais limpo.

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>

Expandindo a segunda resposta de Greg Kindel , você pode escrever uma função para eliminar parte do padrão:

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

Eu posso te mostrar um exemplo:

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 o ES6, se você deseja fazer uma interpolação de cadeias de caracteres em chaves de objeto, você receberá um SyntaxError: expected property name, got '${'se fizer algo como:

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

Você deve fazer o seguinte:

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

Mais um suplemento para a versão ES6 da publicação 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."

O uso da sintaxe do modelo falha em navegadores antigos, importante se você estiver criando HTML para uso público. O uso de concatenação é entediante e difícil de ler, principalmente se você tiver muitas expressões ou longas, ou se precisar usar parênteses para manipular misturas de itens de número e sequência de caracteres (os quais usam o operador +).

O PHP expande strings entre aspas contendo variáveis ​​e até algumas expressões usando uma notação muito compacta: $a="the color is $color";

Em JavaScript, uma função eficiente pode ser escrita para suportar isso:, var a=S('the color is ',color);usando um número variável de argumentos. Embora não haja vantagem sobre a concatenação neste exemplo, quando as expressões ficam mais longas, essa sintaxe pode ficar mais clara. Ou pode-se usar o sinal de cifrão para sinalizar o início de uma expressão usando uma função JavaScript, como no PHP.

Por outro lado, escrever uma função de solução eficiente para fornecer expansão de strings de modelo para navegadores mais antigos não seria difícil. Alguém provavelmente já fez isso.

Por fim, imagino que o sprintf (como em C, C ++ e PHP) possa ser escrito em JavaScript, embora seja um pouco menos eficiente do que essas outras soluções.

Interpolação flexível 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>

Embora os modelos provavelmente sejam os melhores para o caso que você descreve, se você possui ou deseja seus dados e / ou argumentos em forma de iterável / matriz, você pode usá-lo String.raw.

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

Com os dados como uma matriz, pode-se usar o operador spread:

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

Não foi possível encontrar o que estava procurando e o encontrei -

Se você estiver usando o Node.js, há um utilpacote interno com uma função de formato que funciona assim:

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

Coincidentemente, agora isso também está incluído console.logno Node.js.

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