应通过布尔值驱动语义化类名构造，如btn ${isActive ? 'btn--active' : ''}；避免直接调用toString()生成"true"/"false"类名；可封装工具函数或使用框架内置语法（如JSX/Vue的class绑定）实现安全、可维护的动态类名。
直接调用布尔值的 toString() 方法会得到 "true" 或 "false" 字符串，这本身不适合直接用作 CSS 类名（因为类名不能以数字或保留字开头，且 false 语义也不直观）。但你可以结合逻辑判断和字符串拼接，**安全、语义化地生成动态类名**——关键不是“直接用 toString()”，而是“用布尔值驱动类名构造”。
用模板字符串 + 布尔判断生成开关类名
这是最常用也最清晰的方式：把布尔值作为条件，决定是否插入某个有意义的类名片段。
- ✅ 推荐写法：
`btn ${isActive ? 'btn--active' : ''}` - ❌ 避免写法：
`btn ${isActive.toString()}`→ 得到"btn true"或"btn false"，后者毫无意义 - 类名保持语义明确，比如
is-loading、has-error、is-open，而不是依赖"true"/"false"字符串
封装成可复用的类名工具函数
当多个组件需要类似逻辑时，可以封装一个轻量函数，内部处理布尔值到类名的映射：
-
cls('btn', { active: isActive, disabled: isDisabled })→ 返回"btn btn--active"（仅当isActive === true） - 函数内部对每个键值对做
if (value) result.push(`${prefix}--${key}`)，不依赖toString() - 这样既避免了硬编码三元表达式，又杜绝了
"false"这类无效类名
注意类名合法性，别让 toString() “越界”
即使你真想用 bool.toString()，也要先转换为合法标识符：
立即学习“前端免费学习笔记（深入）”；
-
isActive.toString()是"true"，但class="true"合法却无语义；class="false"虽语法合法，但违反直觉、不利于维护 - 若必须用字符串值，建议映射为更友好的形式：
{ true: 'on', false: 'off' }[isActive]或用String(isActive).replace('e', 'd')（不推荐，只为说明风险） - CSS 类名应描述状态（
expanded）、角色（primary）或行为（hidden），而非原始数据类型
在 JSX / Vue 模板中自然使用布尔逻辑
现代框架已内置支持，无需手动调用 toString()：
- JSX：
className={`card ${isHighlighted ? 'card--highlighted' : ''}`} - Vue：
:class="['card', { 'card--highlighted': isHighlighted }]" - 这些写法底层仍是布尔判断，但自动忽略
false/null/undefined值，比手动toString()更安全、更符合习惯
