O que é: Template Literal

O que é Template Literal?

O Template Literal é uma funcionalidade introduzida no ECMAScript 6 (também conhecido como ES6) que permite a criação de strings de forma mais simples e legível. Com o Template Literal, é possível criar strings multi-linhas e inserir expressões JavaScript dentro de uma string de forma mais fácil e eficiente.

Como usar Template Literal?

Para utilizar o Template Literal em seu código JavaScript, basta utilizar o acento grave (`) para delimitar a string. Dentro da string delimitada por acento grave, é possível inserir expressões JavaScript utilizando a sintaxe ${expressao}. Por exemplo:

“`
const nome = ‘João’;
const idade = 30;

const mensagem = `Olá, meu nome é ${nome} e tenho ${idade} anos.`;
console.log(mensagem);
“`

Vantagens do Template Literal

O Template Literal traz diversas vantagens em relação às strings tradicionais em JavaScript. Uma das principais vantagens é a capacidade de criar strings multi-linhas de forma mais simples e legível. Além disso, o Template Literal facilita a inserção de expressões JavaScript dentro de uma string, tornando o código mais limpo e organizado.

Exemplo de uso do Template Literal

Vamos ver um exemplo prático de como utilizar o Template Literal em um código JavaScript:

“`
const produto = {
nome: ‘Notebook’,
preco: 2500
};

const descricao = `O produto ${produto.nome} custa R$ ${produto.preco.toFixed(2)}.`;
console.log(descricao);
“`

Strings multi-linhas com Template Literal

Com o Template Literal, é possível criar strings multi-linhas de forma mais simples e legível. Veja um exemplo:

“`
const texto = `
Este é um exemplo
de uma string
multi-linhas
`;
console.log(texto);
“`

Expressões JavaScript em Template Literal

Além de permitir a criação de strings multi-linhas, o Template Literal também facilita a inserção de expressões JavaScript dentro de uma string. Veja um exemplo:

“`
const numero = 10;
const resultado = `O dobro de ${numero} é ${numero * 2}.`;
console.log(resultado);
“`

Conclusão

O Template Literal é uma funcionalidade poderosa do ECMAScript 6 que facilita a criação de strings de forma mais simples e legível em JavaScript. Com o Template Literal, é possível criar strings multi-linhas e inserir expressões JavaScript de forma mais eficiente, tornando o código mais limpo e organizado. Se você ainda não utiliza o Template Literal em seus projetos, vale a pena experimentar e aproveitar os benefícios que essa funcionalidade oferece.