Funções de template com tag
Processe partes de templates com funções de tag.
Funções de template com tag é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 3 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.
O que é uma função de marcação
Um literal de modelo marcado é uma chamada de função em que o nome da função aparece diretamente antes de um literal de modelo. A função recebe as partes analisadas do modelo e pode transformá-las.
function tag(strings, value) {
return strings[0] + value.toUpperCase() + strings[1]
}
console.log(tag(["Hi ", "!"], "bob"))O vetor de cadeias de caracteres
O primeiro argumento recebido por uma função de marcação é um vetor das partes de cadeia de caracteres literais. Esses são os trechos de texto que ficam entre e ao redor dos marcadores de posição.
function tag(strings) {
return strings.join("|")
}
console.log(tag(["a", "b", "c"]))Os valores
Depois do vetor de cadeias de caracteres, a função de marcação recebe cada valor interpolado como um argumento separado. Usar parâmetros restantes os reúne em um vetor.
function tag(strings, ...values) {
return values.join(",")
}
console.log(tag(["", " and ", ""], "x", "y"))Remontando a cadeia de caracteres
Uma marcação típica percorre o vetor de cadeias de caracteres e insere cada valor entre as partes, reconstruindo a cadeia de caracteres final com a transformação que você quiser.
function tag(strings, ...values) {
let out = ""
strings.forEach(function (s, i) {
out += s + (values[i] !== undefined ? values[i] : "")
})
return out
}
console.log(tag(["A", "B", "C"], 1, 2))Regra do tamanho das cadeias de caracteres
O vetor de cadeias de caracteres sempre tem exatamente um elemento a mais que o vetor de valores. Há texto antes do primeiro marcador de posição e depois do último, mesmo que algumas partes estejam vazias.
function tag(strings, ...values) {
return "strings=" + strings.length + " values=" + values.length
}
console.log(tag(["", "", ""], 1, 2))Transformando valores
Como a marcação controla a forma como os valores são inseridos, você pode formatá-los. Aqui, cada valor numérico é duplicado antes da inserção.
function dbl(strings, ...values) {
let out = ""
strings.forEach(function (s, i) {
out += s + (values[i] !== undefined ? values[i] * 2 : "")
})
return out
}
console.log(dbl(["", " ", ""], 3, 4))Retornando valores que não são cadeias de caracteres
Uma função de marcação não precisa retornar uma cadeia de caracteres. Ela pode retornar qualquer valor, como um objeto ou vetor criado a partir das partes do modelo.
function parts(strings, ...values) {
return { strings: strings, values: values }
}
const r = parts(["a", "b"], 9)
console.log(r.values[0])A propriedade raw
O vetor de cadeias de caracteres também possui uma propriedade raw, que contém as cadeias sem o processamento das sequências de escape. É assim que String.raw funciona.
console.log(String.raw({ raw: ["a\\n", "b"] }, "X"))Colocando interpolações em maiúsculas
Uma função de marcação comum de demonstração coloca cada valor interpolado em maiúsculas, deixando o texto estático intacto.
function loud(strings, ...values) {
let out = ""
strings.forEach(function (s, i) {
out += s + (values[i] !== undefined ? String(values[i]).toUpperCase() : "")
})
return out
}
console.log(loud(["name is ", "."], "alice"))Por que usar marcações
As funções de marcação permitem padrões poderosos: escapar entradas não confiáveis, internacionalização, construção de SQL ou consultas e formatação personalizada, tudo orientado pela estrutura do modelo.
function highlight(strings, ...values) {
let out = ""
strings.forEach(function (s, i) {
out += s + (values[i] !== undefined ? "[" + values[i] + "]" : "")
})
return out
}
console.log(highlight(["score: ", " pts"], 42))Ignorando valores
Uma função de marcação pode escolher ignorar completamente os valores interpolados e produzir uma saída baseada apenas nas partes estáticas, o que é útil para análise ou registro.
function onlyStatic(strings) {
return strings.filter(function (s) { return s.length > 0 }).join(" ")
}
console.log(onlyStatic(["Hello ", " world ", ""]))Verificação rápida
Teste seus conhecimentos sobre funções de marcação.
Recapitulação
Recapitulação: Os modelos marcados chamam uma função com as partes analisadas do modelo.
- O primeiro argumento é a matriz de textos
- Os argumentos restantes são os valores interpolados
- A matriz de textos tem um elemento a mais que a matriz de valores
- A propriedade raw contém o texto não processado
function tag(s, ...v) { return s[0] + v[0] }
console.log(tag(["go "], "fast"))
Aprenda JavaScript com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 59
- Aulas
- 200
Perguntas Frequentes
A aula “Funções de template com tag” é grátis?
Sim — o texto completo de “Funções de template 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 “Funções de template com tag”?
Processe partes de templates com funções de tag. 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 3 de 4.
Quanto tempo leva a aula “Funções de template 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