Template strings
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.
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 (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
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 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."
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 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!"
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 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 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
Specification |
---|
ECMAScript Language Specification # sec-template-literals |
Compatibilidade com navegadores
BCD tables only load in the browser