标签模板的实际应用场景
使用标签构建安全的 HTML 和样式化字符串。
标签模板的实际应用场景 是 CoddyKit 上的免费 JavaScript Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 4 节课。
实际应用中的标签
许多库都由带标签的模板驱动：HTML 转义、样式组件、GraphQL 查询和国际化。共同理念是拦截插值值并对其进行安全处理。
function tag(s, ...v) { return s[0] + v[0] + s[1] }
console.log(tag(["<", ">"], "b"))转义问题
从用户输入构建 HTML 时，小于号等特殊字符可能注入标记。标签函数可以自动转义这些字符，而且只处理插值值中的字符。
const danger = "<script>"
console.log("raw: " + danger)转义辅助函数
首先定义一个辅助函数，将危险字符替换为安全的 HTML 实体。
function escapeHtml(str) {
return String(str)
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
}
console.log(escapeHtml("<b>"))安全的 HTML 标签
现在构建一个标签，转义每个插值值，但保持静态模板部分原样，因为这些部分来自受信任的开发者。
function escapeHtml(str) {
return String(str).replace(/</g, "<").replace(/>/g, ">")
}
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>"))为什么静态部分保持 raw
只有插值值是不受信任的用户数据。字面模板部分由开发者编写，因此保持未转义，以确保预期的标记能够正常工作。
function safe(strings, ...values) {
let out = ""
strings.forEach(function (s, i) {
const safer = values[i] !== undefined ? String(values[i]).replace(/</g, "<") : ""
out += s + safer
})
return out
}
console.log(safe(["<b>", "</b>"], "<i>x</i>"))样式化输出标签
另一种模式是用格式标记包裹插值值，例如在报告中突出显示数字。
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))构建查询字符串
标签可以为网址中的值编码，对每个插值片段进行转义，让静态结构保持完整，同时安全地编码数据。
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"))复数处理
标签可以检查某个值并调整周围文本，例如选择单数或复数措辞。
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))去除缩进
标签可以清理多行模板，删除每行开头的缩进，从而生成整洁的输出。
function dedent(strings) {
return strings[0].split("\n").map(function (l) { return l.trim() }).join("\n")
}
console.log(dedent([" a\n b\n c"]))组合标签
您可以让一个标签调用辅助函数，从而叠加多种行为。这里的标签既包装值，又强调值。
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"))何时不应使用标签
对于简单字符串，普通模板字符串就足够了。只有在需要一致地转换插值值（例如进行转义或本地化）时，才应使用标签函数。
const name = "Lee"
console.log("Welcome, " + name)快速检查
请测试您对标签实际应用的了解。
回顾
回顾：带标签的模板支持安全且格式化的输出。
- 为了确保 HTML 安全，只转义插值值
- 静态部分受信任并保持 raw
- 使用标签进行样式处理、编码和复数处理
- 不需要转换时，优先使用普通模板字符串
function safe(s, v) { return s[0] + String(v).replace(/</g, "<") }
console.log(safe(["x="], "<a>"))常见问题解答
「标签模板的实际应用场景」课时是免费的吗？
是的 — 「标签模板的实际应用场景」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 4 节课。
「标签模板的实际应用场景」这节课中我会学到什么？
使用标签构建安全的 HTML 和样式化字符串。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 JavaScript Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。
「标签模板的实际应用场景」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 JavaScript Academy 课中编写并运行代码吗？
能。每节 JavaScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。