JavaScript Academy · 课时

标签模板函数

Q: 「标签模板函数」这节课中我会学到什么？

使用标签函数处理模板片段。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用标签函数处理模板片段。

标签模板函数 是 CoddyKit 上的免费 JavaScript Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 4 节课。

什么是标签函数

带标签的模板字符串是一种函数调用形式：函数名直接放在模板字符串之前。该函数会接收模板解析后的各个部分，并可以对它们进行转换。

function tag(strings, value) {
  return strings[0] + value.toUpperCase() + strings[1]
}
console.log(tag(["Hi ", "!"], "bob"))

字符串数组

标签函数接收的第一个参数是字面字符串部分组成的数组。这些部分就是占位符之间以及占位符周围的文本块。

function tag(strings) {
  return strings.join("|")
}
console.log(tag(["a", "b", "c"]))

各个值

接收字符串数组之后，标签函数会将每个插值后的值作为单独的参数接收。使用剩余参数可以将它们收集到一个数组中。

function tag(strings, ...values) {
  return values.join(",")
}
console.log(tag(["", " and ", ""], "x", "y"))

重新组装字符串

典型的标签函数会遍历字符串数组，并将每个值插入各个部分之间，根据您的需求进行转换，从而重新构建最终字符串。

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))

字符串长度规则

字符串数组中的元素数量始终比值数组多一个。第一个占位符之前和最后一个占位符之后都存在文本，即使其中某些部分为空也是如此。

function tag(strings, ...values) {
  return "strings=" + strings.length + " values=" + values.length
}
console.log(tag(["", "", ""], 1, 2))

转换值

由于标签函数可以控制值的插入方式，因此您可以对值进行格式化。这里的每个数值都会在插入前加倍。

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))

返回非字符串值

标签函数不必返回字符串。它可以返回任意值，例如根据模板各部分构建的对象或数组。

function parts(strings, ...values) {
  return { strings: strings, values: values }
}
const r = parts(["a", "b"], 9)
console.log(r.values[0])

raw 属性

字符串数组还带有一个 raw 属性，其中保存的是未处理转义序列的字符串。这正是 String.raw 的工作方式。

console.log(String.raw({ raw: ["a\\n", "b"] }, "X"))

将插值转换为大写

一个常见的演示标签会将每个插值值转换为大写，同时保持静态文本不变。

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"))

为什么使用标签

标签函数支持强大的模式：转义不受信任的输入、国际化、结构化查询语言或查询构建，以及自定义格式化；这些功能都由模板结构驱动。

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))

忽略值

标签可以完全忽略插值值，仅根据静态部分生成输出，适用于分析或日志记录。

function onlyStatic(strings) {
  return strings.filter(function (s) { return s.length > 0 }).join(" ")
}
console.log(onlyStatic(["Hello ", " world ", ""]))

快速检查

请测试您对标签函数的了解。

回顾

回顾：带标签的模板会使用解析后的模板部分调用函数。

第一个参数是字符串数组
其余参数是插值值
字符串数组比插值值多一个元素
raw 属性保存未经处理的文本

function tag(s, ...v) { return s[0] + v[0] }
console.log(tag(["go "], "fast"))

常见问题解答

「标签模板函数」课时是免费的吗？

是的 — 「标签模板函数」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 4 节课。

「标签模板函数」这节课中我会学到什么？

使用标签函数处理模板片段。你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「标签模板函数」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 JavaScript Academy 课中编写并运行代码吗？

能。每节 JavaScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 JavaScript Academy