Template String (Template literals) · jedibit

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.

Complementando:

Sobre o "usar condições", na verdade não se restringe a isso. Você pode colocar qualquer expressão válida que retorne algum valor, e este será impresso. Exemplos:

const x = 10.4;
// Arrendondando e somando 10: 20
console.log(`Arrendondando e somando 10: ${Math.round(x) + 10}`);

const a = 1;
const b = 2;
// a + b = 3
console.log(`a + b = ${a + b}`);

const valor = 1234.56;
// O valor é R$ 1.234,56
console.log(`O valor é ${valor.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' })}`);

Lembrando que o resultado da expressão sempre é convertido para string, seguindo determinadas regras descritas na documentação. Por exemplo, eu posso definir um formato específico para objetos arbitrários, bastando criar um método toString:

const obj = {
    nome: 'Fulano',
    nomes_do_meio: ['Castro', 'Souza', 'Ramos'],
    sobrenome: 'Silva'
};
// ao colocar obj dentro de uma template string, será mostrado o retorno de toString()
obj.toString = function () {
    return `${this.nome} ${this.nomes_do_meio.join(" ")} ${this.sobrenome}`;
}
console.log(`Nome completo: ${obj}`); // Nome completo: Fulano Castro Souza Ramos Silva

Assim, quando obj estiver dentro de uma template string, a string retornada por toString será impressa.

Note que dentro de toString usei outra template string para concatenar os nomes.

Por fim, tem uma outra forma de uso (menos comum, pelo que vejo), que é definindo uma função que processa o template:

function corrigePlural(partes, quantidade) {
    let [texto1, texto2] = partes; // texto1 = "Total: ", texto2 = " unidade";
    if (quantidade > 1) {
        texto2 += "s"; // se quantidade for maior que 1, muda a palavra para o plural
    }
    // retorna o texto corrigido, formatando o número e adiciona um ponto final
    return `${texto1}${quantidade.toString().padStart(3, '0')}${texto2}.`;
}

let qtd = 1;
console.log(corrigePlural`Total: ${qtd} unidade`); // Total: 001 unidade.

qtd = 4;
console.log(corrigePlural`Total: ${qtd} unidade`); // Total: 004 unidades.

No caso, o template chama a função corrigePlural. O primeiro argumento é um array contendo as partes que não estão dentro de ${}. E os demais parâmetros são os valores que estão nos placeholders. Assim, eu posso manipular os valores à vontade, deixando a string do jeito que eu precisar.