Template strings

Template strings são literais string que permitem expressões embutidas. Você pode usar string multi-linhas e interpolação de string com elas.

Sintaxe

`corpo de texto`

`texto linha 1
 texto linha 2`

`texto string ${expression} texto string`

tag `texto string ${expression} texto string`

Descrição

Template strings são envolvidas por crases (` `) em vez de aspas simples ou duplas. Template strings podem possuir marcadores. Estes são indicados pelo sinal de dólar seguido de chaves (${expression}). As expressões nos marcadores, bem como o texto em volta delas são passados à 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.

Strings multi-linhas

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"

Interpolação de Expressões

Para encapsular expressões dentro de strings, você precisava utilzar a seguinte síntaxe:

var a = 5;
var b = 10;
console.log("Quinze é " + (a + b) + " e não " + (2 * a + b) + ".");
// "Quinze é 15 e não 20."

Agora, com template strings, você pode utilizar as substituções sintaticas 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."

Tagged template strings

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 mofiicar 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!"

Strings Raw

A propriedade especial raw, disponível no primeiro argumento da função da tagged template string acima, permite o acesso as strings de maneira crua (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 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ções

Compatibidade com navegadores

Veja também

• String
• String.raw()
• Lexical grammar