Olá, pessoal! Hoje vamos explorar uma das funcionalidades mais úteis do JavaScript moderno: as Template Strings (também conhecidas como Template Literals). Se vocês já se cansaram de concatenar strings com +, preparem-se para ter a vida facilitada!

O que são Template Strings?

Template Strings são uma forma mais moderna e poderosa de trabalhar com strings no JavaScript, introduzidas no ES6 (ECMAScript 2015). Elas usam crases (`) em vez de aspas simples ou duplas.

Sintaxe Básica

// Método tradicional
const nome = "Ana";
const saudacao = "Olá, " + nome + "!";

// Com Template String
const saudacaoModerno = `Olá, ${nome}!`;

console.log(saudacaoModerno); // "Olá, Ana!"

Principais Vantagens

1. Interpolação de Variáveis

const produto = "Notebook";
const preco = 2500;
const parcelas = 10;

// Método antigo
const mensagemAntiga = "O " + produto + " custa R$ " + preco + " em " + parcelas + " parcelas.";

// Com Template String
const mensagemNova = `O ${produto} custa R$ ${preco} em ${parcelas} parcelas.`;

console.log(mensagemNova);
// "O Notebook custa R$ 2500 em 10 parcelas."

2. Strings Multilinha

// Método antigo (chato!)
const textoAntigo = "Linha 1\n" +
                   "Linha 2\n" +
                   "Linha 3";

// Com Template String (much better!)
const textoNovo = `Linha 1
Linha 2
Linha 3`;

console.log(textoNovo);

3. Expressões Dentro de Strings

const a = 5;
const b = 3;

console.log(`A soma de ${a} + ${b} é ${a + b}`);
// "A soma de 5 + 3 é 8"

const isMember = true;
console.log(`Status: ${isMember ? "Membro Premium" : "Membro Comum"}`);
// "Status: Membro Premium"

Exemplos Práticos no Mundo Real

Exemplo 1: Gerando HTML Dinâmico

const usuario = {
    nome: "Carlos Silva",
    idade: 28,
    cidade: "São Paulo"
};

const cardUsuario = `
    <div class="user-card">
        <h2>${usuario.nome}</h2>
        <p>Idade: ${usuario.idade} anos</p>
        <p>Cidade: ${usuario.cidade}</p>
        <small>Cadastrado em: ${new Date().toLocaleDateString()}</small>
    </div>
`;

console.log(cardUsuario);

Exemplo 2: Cálculos Complexos

const carrinho = [
    { produto: "Mouse", preco: 50, quantidade: 2 },
    { produto: "Teclado", preco: 120, quantidade: 1 },
    { produto: "Monitor", preco: 800, quantidade: 1 }
];

const totalCarrinho = carrinho.reduce((total, item) => total + (item.preco * item.quantidade), 0);

const resumoCompra = `
    RESUMO DO CARRINHO:
    ${carrinho.map(item => 
        `${item.quantidade}x ${item.produto} - R$ ${(item.preco * item.quantidade).toFixed(2)}`
    ).join('\n    ')}

    TOTAL: R$ ${totalCarrinho.toFixed(2)}
`;

console.log(resumoCompra);

Exemplo 3: Funções com Template Strings

function criarEmail(nome, produto, valor) {
    return `
    Prezado(a) ${nome},

    Confirmamos sua compra do produto: ${produto}
    Valor total: R$ ${valor.toFixed(2)}

    Obrigado por comprar conosco!

    Atenciosamente,
    Equipe da Loja
    `;
}

const email = criarEmail("Maria", "Fone de Ouvido", 150.00);
console.log(email);

Recursos Avançados

Tagged Templates

// Função de tag personalizada
function highlight(strings, ...values) {
    let result = '';

    strings.forEach((string, i) => {
        result += string;
        if (values[i]) {
            result += `<strong>${values[i]}</strong>`;
        }
    });

    return result;
}

const produto = "Smartphone";
const preco = 1200;

const textoFormatado = highlight`O ${produto} está por apenas R$ ${preco}!`;

console.log(textoFormatado);
// "O <strong>Smartphone</strong> está por apenas R$ <strong>1200</strong>!"

Trabalhando com Arrays

const alunos = ["João", "Maria", "Pedro", "Ana"];

const listaAlunos = `
    LISTA DE ALUNOS:
    ${alunos.map((aluno, index) => `${index + 1}. ${aluno}`).join('\n    ')}

    Total de alunos: ${alunos.length}
`;

console.log(listaAlunos);

Dicas Importantes

1. Use crases (`), não aspas
2. ${} é o placeholder para variáveis e expressões
3. Preserva quebras de linha e espaços
4. Pode ser usado com funções para criar templates complexos

Exercício Prático

Vamos praticar? Tente criar uma função que gera um relatório de notas:

const alunos = [
    { nome: "João", notas: [8, 7, 9] },
    { nome: "Maria", notas: [6, 8, 7] },
    { nome: "Pedro", notas: [9, 9, 10] }
];

// Sua implementação aqui!
function gerarRelatorio(alunos) {
    return `
    RELATÓRIO DE NOTAS:
    ${alunos.map(aluno => {
        const media = aluno.notas.reduce((sum, nota) => sum + nota, 0) / aluno.notas.length;
        return `- ${aluno.nome}: Média ${media.toFixed(1)}`;
    }).join('\n    ')}
    `;
}

console.log(gerarRelatorio(alunos));

Conclusão

Template Strings são uma ferramenta incrível que torna o trabalho com strings muito mais limpo e expressivo. Elas eliminam a complexidade da concatenação tradicional e abrem possibilidades para códigos mais legíveis e maintainable.