Template String (Template literals) é um recurso adicionado ao JavaScript, que foi incluído na ECMAScript6 e permite criar Strings de forma muito mais simples utilizando o crase `.
Com o template string, nós podemos adicionar múltiplas linhas, concatenar de forma mais simples e usar placeholders para interpolar os valores de variáveis de forma mais prática.
Sintaxe
`Qualquer ${variavel} pode aparecer aqui`Criando sem template string
let variavel = 'variável';
console.log('Qualquer '+variavel+' pode aparecer aqui');
//Texto com quebra de linha
let texto = 'Sou um texto muito grande'
+ ' e preciso dar continuidade a linha'
+ ' que sou escrito';Vantagens de usar template string
1 – Concatenar variáveis
Com o template string nós podemos concatenar as variáveis sem a necessidade de do operador “+”
Basta adicionar um placeholder com um cifrão $ e colocar a variável entre duas chaves {}, veja o exemplo abaixo.
let variavel = 'variável';
console.log(`Qualquer ${variavel} pode aparecer aqui`);2 – Múltiplas linhas
Com o template string nós podemos colocar múltiplas linhas, quebra de linhas e espaços sem a necessidade de caracteres especiais.
let texto = `Sou um texto muito grande
e preciso dar continuidade a spaço :) linha
que sou escrito`;3 – Usar condições
Com o template string, nós podemos injetar condições que serão executadas em tempo de execução do nosso texto
let eVerde = true;
console.log(`Esse texto tem a cor verde?
${eVerde ? "Sim" : "Não"}`
);Conclusão
Como podemos ver, o template string surgiu para facilitar e muito a nossa vida como desenvolvedor JavaScript e com esse recurso podemos deixar o nosso código muito mais limpo, organizado e legível.