JavaScript Academy · Aula

Casos de uso práticos de templates com tag

Crie HTML seguro e strings estilizadas com tags.

Casos de uso práticos de templates com tag é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de JavaScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de JavaScript Academy inclui 4 aulas no total.

Marcações no mundo real

Os modelos marcados são usados por muitas bibliotecas: escapamento de HTML, componentes estilizados, consultas GraphQL e internacionalização. A ideia comum é interceptar os valores interpolados para processá-los com segurança.

function tag(s, ...v) { return s[0] + v[0] + s[1] }
console.log(tag(["<", ">"], "b"))

O problema do escapamento

Ao criar HTML a partir da entrada do usuário, caracteres especiais, como o sinal de menor que, podem injetar marcação. Uma função de marcação pode escapar esses caracteres automaticamente apenas nos valores interpolados.

const danger = "<script>"
console.log("raw: " + danger)

Um auxiliar de escapamento

Primeiro, definimos um auxiliar que substitui caracteres perigosos por entidades HTML seguras.

function escapeHtml(str) {
  return String(str)
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
}
console.log(escapeHtml("<b>"))

Marcação de HTML seguro

Agora criamos uma função de marcação que escapa cada valor interpolado, mas deixa as partes estáticas do modelo como estão, pois elas vêm do desenvolvedor confiável.

function escapeHtml(str) {
  return String(str).replace(/</g, "&lt;").replace(/>/g, "&gt;")
}
function safe(strings, ...values) {
  let out = ""
  strings.forEach(function (s, i) {
    out += s + (values[i] !== undefined ? escapeHtml(values[i]) : "")
  })
  return out
}
console.log(safe(["<p>", "</p>"], "<script>"))

Por que as partes estáticas permanecem brutas

Apenas os valores interpolados são dados de usuário não confiáveis. As partes literais do modelo são escritas pelo desenvolvedor, portanto permanecem sem escapamento para que a marcação pretendida continue funcionando.

function safe(strings, ...values) {
  let out = ""
  strings.forEach(function (s, i) {
    const safer = values[i] !== undefined ? String(values[i]).replace(/</g, "&lt;") : ""
    out += s + safer
  })
  return out
}
console.log(safe(["<b>", "</b>"], "<i>x</i>"))

Marcação de saída estilizada

Outro padrão envolve valores interpolados em marcadores de formatação, por exemplo, para destacar números em um relatório.

function money(strings, ...values) {
  let out = ""
  strings.forEach(function (s, i) {
    out += s + (values[i] !== undefined ? "$" + Number(values[i]).toFixed(2) : "")
  })
  return out
}
console.log(money(["Total: ", ""], 9.5))

Construindo cadeias de consulta

As marcações podem codificar valores para URLs, escapando cada parte interpolada para que a estrutura estática permaneça intacta enquanto os dados são codificados com segurança.

function url(strings, ...values) {
  let out = ""
  strings.forEach(function (s, i) {
    out += s + (values[i] !== undefined ? encodeURIComponent(values[i]) : "")
  })
  return out
}
console.log(url(["/search?q=", ""], "a b&c"))

Pluralização

Uma função de marcação pode analisar um valor e ajustar o texto ao redor, como ao escolher uma formulação no singular ou no plural.

function plural(strings, count) {
  const noun = count === 1 ? "item" : "items"
  return strings[0] + count + " " + noun
}
console.log(plural(["You have "], 1))
console.log(plural(["You have "], 3))

Removendo a indentação

As marcações podem limpar modelos com várias linhas removendo a indentação inicial de cada linha e produzindo uma saída organizada.

function dedent(strings) {
  return strings[0].split("\n").map(function (l) { return l.trim() }).join("\n")
}
console.log(dedent(["  a\n  b\n  c"]))

Compondo marcações

Você pode combinar comportamentos fazendo uma marcação chamar auxiliares. Aqui, a marcação envolve e realça os valores.

function emph(strings, ...values) {
  let out = ""
  strings.forEach(function (s, i) {
    const v = values[i] !== undefined ? "**" + values[i] + "**" : ""
    out += s + v
  })
  return out
}
console.log(emph(["Note: ", "!"], "important"))

Quando não usar marcações

Para textos simples, um literal de modelo comum é suficiente. Recorra a uma função de marcação apenas quando precisar de uma transformação consistente dos valores interpolados, como escapamento ou localização.

const name = "Lee"
console.log("Welcome, " + name)

Verificação rápida

Teste seus conhecimentos práticos sobre funções de marcação.

Recapitulação

Recapitulação: Os modelos marcados permitem produzir saídas seguras e formatadas.

Escape apenas os valores interpolados para garantir a segurança do HTML
As partes estáticas permanecem confiáveis e brutas
Use marcações para estilização, codificação e pluralização
Prefira literais simples quando nenhuma transformação for necessária

function safe(s, v) { return s[0] + String(v).replace(/</g, "&lt;") }
console.log(safe(["x="], "<a>"))

Perguntas Frequentes

A aula “Casos de uso práticos de templates com tag” é grátis?

Sim — o texto completo de “Casos de uso práticos de templates com tag” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de JavaScript Academy, atualize para CoddyKit PRO. O curso de JavaScript Academy inclui 4 aulas no total.

O que vou aprender em “Casos de uso práticos de templates com tag”?

Crie HTML seguro e strings estilizadas com tags. Você pratica JavaScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar JavaScript Academy?

Nenhuma experiência prévia é necessária. JavaScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “Casos de uso práticos de templates com tag”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de JavaScript Academy?

Sim. Cada aula de JavaScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

Fundamentos da interpolação de strings
Strings multilinha
Funções de template com tag
Casos de uso práticos de templates com tag

← Voltar para JavaScript Academy