本文介绍如何利用 Go 模板的 or 和 and 函数组合，一行内安全、清晰地为 HTML 属性（如 class）条件性插入字符串（如 "active"）或空值（等效于不渲染），避免冗长的 {{ if }}...{{ else }} 块。
本文介绍如何利用 go 模板的 `or` 和 `and` 函数组合，一行内安全、清晰地为 html 属性（如 `class`）条件性插入字符串（如 `"active"`）或空值（等效于不渲染），避免冗长的 `{{ if }}...{{ else }}` 块。
在 Go 的 html/template 中，HTML 属性值需保持语义正确：当某个修饰类（如 "active"）不存在时，理想做法是完全不渲染该字符串，而非输出空格或空字符串（后者可能破坏 CSS 选择器逻辑或引发意外样式）。传统写法使用 {{ if }}...{{ else }} 分支虽直观，但易导致模板臃肿，尤其当基础 class 列表很长且仅一个 class 动态变化时。
幸运的是，Go 模板提供了函数式组合能力。核心思路是：让条件表达式在为真时返回所需字符串，为假时返回空值（nil 或空字符串），再通过 or 提供默认空字符串兜底，从而实现“有则插入、无则忽略”。
✅ 推荐写法（单行、健壮、可读）：
<button class="{{ or (and (eq .var1 "val123") "active") }} class1 class2 class3 class4 class5 class6">
test
</button>? 原理拆解：
立即学习“前端免费学习笔记（深入）”；
- (eq .var1 "val123")：判断条件，返回布尔值；
- (and (eq .var1 "val123") "active")：and 函数按顺序求值，仅当所有参数为真（非零、非空、非 nil）时返回最后一个参数值；否则返回第一个 falsy 值。因此，条件为真 → 返回 "active"；为假 → 返回 false（falsy）；
- {{ or ... }}：or 函数返回第一个 truthy 值；若所有参数均为 falsy，则返回最后一个。此处 (and ...) 在条件为假时返回 false（falsy），于是 or 返回其右侧隐式默认值 —— 空字符串 ""。而 Go 模板会自动省略空字符串属性值前后的空格，最终生成干净的 HTML。
⚠️ 注意事项：
- 不要写成 {{ if ... }}active{{ end }} 后直接拼接其他 class：这会在条件为假时留下多余空格（如 class=" class1..."），虽浏览器通常容错，但不符合语义且影响可维护性；
- 避免使用 printf "%s" ... 等绕行方式，既冗余又丧失 or/and 的语义清晰性；
- 若需添加多个动态 class（如 "active" 和 "disabled"），可嵌套 and 或用 join 配合切片（需后端预处理），但单条件场景推荐本文方案；
- 所有字符串字面量（如 "val123"、"active"）必须用双引号包裹，单引号在 Go 模板中无效。
? 总结：
通过 {{ or (and <condition> "<value>") }} 模式，你能在一行内优雅实现“条件性注入”，兼顾简洁性、安全性与可读性。它本质是函数式模板编程的典型实践——将逻辑抽象为值流，而非控制流分支，值得在各类动态属性（id、data-*、aria-*）中复用。
