Template strings

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨setembro de 2015⁩.

Template Strings sãostrings que permitem expressões embutidas. Você podeutilizar string multi-linhas e interpolação destring com elas.

Basicamente é uma nova forma de criar strings e tornar o seu código um pouco mais legível.

Sintaxe

`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 possuirplaceholders. Estes são indicados por um cifrão seguido de chaves (${expression}). As expressões nosplaceholders, bem como o texto em volta delas são passados a uma função. A função padrão apenas concatena as partes em umastring única. Se existir uma expressão precedendo atemplate string (funçãotag exemplo), atemplate string é definida como "tagged template string". No caso, a expressãotag (geralmente uma função) é chamada pelatemplate string processada, que você pode manipular antes de produzir o resultado.

`\`` === "`"; // --> true

Strings multi-linhas

Qualquer caracter de nova linha inserido no código é parte datemplate string. Utilizandostrings 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 1texto 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 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} enão ${2 * a + b}.`);// "Quinze é 15 e// não 20."

Tagged template strings

Uma forma mais avançada dostemplate string são ostemplate strings com marcações ou tags, outagged template strings. Com eles, você tem a possibilidade de modificar a saída dostemplate 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 chamadoscooked) 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!"

StringsRaw

A propriedade especialraw, disponível no primeiro argumento da função datagged 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étodoString.raw() permite a criação de strings cruas, exatamente como astemplate functions e as concatenações deveram criar.