Template Strings são strings que permitem expressões embutidas. Você pode utilizar string multi-linhas e interpolação de string com elas.
Basicamente é uma nova forma de criar strings e tornar o seu código um pouco mais legível.
`corpo de texto`
`texto linha 1
texto linha 2`
`texto string ${expression} texto string`
tag `texto string ${expression} texto string`
Template strings são envolvidas por (acentos graves) (` `) em vez de aspas simples ou duplas. Template strings podem possuir placeholders. Estes são indicados por um cifrão seguido de chaves (${expression}). As expressões nos placeholders, bem como o texto em volta delas são passados a uma função. A função padrão apenas concatena as partes em uma string única. Se existir uma expressão precedendo a template string (função tag exemplo), a template string é definida como "tagged template string". No caso, a expressão tag (geralmente uma função) é chamada pela template string processada, que você pode manipular antes de produzir o resultado.
`\`` === '`' // --> true
Qualquer caracter de nova linha inserido no código é parte da template string. Utilizando strings normais, você teria de usar a síntaxe a seguir para obter strings multi-linhas:
console.log('texto string linha 1\n' +
'texto string linha 2');
// "texto string linha 1
// texto string linha 2"
Para obter o mesmo efeito com strings multi-linhas, você agora pode escrever:
console.log(`texto string linha 1 texto string linha 2`); // "texto string linha 1 // texto string linha 2"
Para encapsular expressões dentro de strings, você precisava utilizar a seguinte sintaxe:
var a = 5;
var b = 10;
console.log('Quinze é ' + (a + b) + ' e\nnão ' + (2 * a + b) + '.');
// "Quinze é 15 e
// não 20."
Agora, com template strings, você pode utilizar as substituições sintáticas tornando o código mais legível:
var a = 5;
var b = 10;
console.log(`Quinze é ${a + b} e
não ${2 * a + b}.`);
// "Quinze é 15 e
// não 20."
Uma forma mais avançada dos template string são os template strings com marcações ou tags, ou tagged template strings. Com eles, você tem a possibilidade de modificar a saída dos template strings usando uma função. O primeiro argumento contém um array de literais ("Hello" e "World" neste exemplo). Do segundo em diante e cada argumento subsequente contém valores previamente processados (algumas vezes chamados cooked) pelas expressões de substituição ("15" e "50" no caso do exemplo). No final, a função retorna a string ja manipulada:
var a = 5;
var b = 10;
function tag(strings, ...values) {
console.log(strings[0]); // "Hello "
console.log(strings[1]); // " world"
console.log(values[0]); // 15
console.log(values[1]); // 50
return "Bazinga!";
}
tag`Hello ${ a + b } world ${ a * b}`;
// "Bazinga!"
A propriedade especial raw, disponível no primeiro argumento da função da tagged template string acima, permite o acesso as strings de maneira pura (raw) exatamente como elas foram especificadas:
function tag(strings, ...values) {
return strings.raw[0];
}
tag`string text line 1 \n string text line 2`;
// "string text line 1 \\n string text line 2"
Adicionalmente, o método {{jsxref("String.raw()")}} permite a criação de strings cruas, exatamente como as template functions e as concatenações deveram criar.
String.raw`Hi\n${2+3}!`; // "Hi\\n5!"
| Especificação | Status | Comentário |
|---|---|---|
| {{SpecName('ES2015', '#sec-template-literals', 'Template Literals')}} | {{Spec2('ES2015')}} | Definição inicial. Definido em várias seções da especificação: Template Literals, Tagged Templates |
| {{SpecName('ESDraft', '#sec-template-literals', 'Template Literals')}} | {{Spec2('ESDraft')}} | Definido em várias seções da especificação: Template Literals, Tagged Templates |
{{Compat("javascript.grammar.template_literals")}}