O que são template literals?

Question

Accepted Answer

**Template literals** usam backticks (`` ` ``) e adicionam duas coisas que aspas simples não têm: **interpolação** de expressões e strings **multi-linhas**. ```js const name = "Ann"; const count = 3; // interpolation: ${expression} const msg = `Hi ${name}, you have ${count} new messages`; // any expression works, not just variables const total = `Total: ${(count * 1.1).toFixed(2)}`; // multi-line — preserves the line breaks const html = `

${name}

`; ``` Antes de template literals você escreveria `"Hi " + name + ", " + count + ...` — verboso e propenso a erros. Interpolação é muito mais legível. ## Tagged templates (avançado) Uma função colocada antes dos backticks recebe as partes da string e os valores interpolados, permitindo que ela os processe: ```js function highlight(strings, ...values) { return strings.reduce((out, s, i) => out + s + (values[i] ? `${values[i]}` : ""), ""); } highlight`Hello ${name}!`; // "Hello Ann!" ``` Isso alimenta bibliotecas como **styled-components** e helpers de escape seguro para SQL/HTML. ## Por que isso importa Template literals são a forma padrão de construir strings hoje — interpolação legível, texto multi-linha fácil e um hook (tagged templates) para DSLs.