Você pode tirar proveito dos Literais de Modelo e usar esta sintaxe:
`String text ${expression}`
Os literais de modelo são delimitados por back-tick (``) (acento grave) em vez de aspas duplas ou simples.
Esse recurso foi introduzido no ES2015 (ES6).
Exemplo
var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b}.`);
// "Fifteen is 15.
Quão legal é isso?
Bônus:
Ele também permite seqüências de várias linhas em javascript sem escapar, o que é ótimo para modelos:
return `
<div class="${foo}">
...
</div>
`;
Suporte do navegador :
Como essa sintaxe não é suportada por navegadores mais antigos (principalmente o Internet Explorer), convém usar o Babel / Webpack para transpilar seu código no ES5 para garantir que ele seja executado em qualquer lugar.
Nota:
A partir do IE8 +, você pode usar a formatação básica de cadeias dentro console.log
:
console.log('%s is %d.', 'Fifteen', 15);
// Fifteen is 15.
"${foo}"
é literalmente $ {foo}`${foo}`
é o que você realmente quer