Eu também expandi e alterei o meu texto original, vê se assim fica mais fácil de compreender:
Conceito
Tagged template strings expandem a utilidade dos template literals, permitindo que você passe um literal de template através de uma função. A função pode então realizar operações nesses strings antes de retornar o resultado final. Isso é útil para sanitização, localização, e muitos outros propósitos.
Como Funciona
A função especial que trata o template literal é chamada com argumentos de forma um pouco diferente:
- Primeiro argumento: um array de strings contendo os textos literais (os que estão fora das expressões de interpolação).
- Demais argumentos: os valores resultantes das expressões de interpolação.
Exemplo
Vamos atualizar o exemplo para usar let ao invés de var, seguindo as recomendações do ES6, e detalhar melhor o que acontece:
let a = 42;
let b = 73;
function tag(strings, ...valores) {
console.log(strings[0]); // "Hello "
console.log(strings[1]); // " world "
console.log(valores[0]); // 115 (resultado de a + b)
console.log(valores[1]); // 3066 (resultado de a * b)
// Aqui podemos manipular os strings e valores como desejarmos
return "Bazinga!";
}
// Vamos passar o template literal pela função tag
let resultado = tag`Hello ${a + b} world ${a * b}`;
console.log(resultado); // "Bazinga!"
Fluxo
Quando você chama tag com um template literal como:
tag`Hello ${a + b} world ${a * b}`,
O JavaScript automaticamente divide o template em partes:
- Strings literais: "Hello " e " world ", passados no primeiro argumento como um array.
- Valores das expressões: 115 (a soma de a e b) e 3066 (o produto de a e b), passados como argumentos subsequentes.
A função tag então imprime os componentes do template para demonstrar como eles são recebidos. Por fim, retorna "Bazinga!", mostrando que o retorno da função substitui o valor original do template literal.
