JS模板字符串占位符如何实现多条件判断逻辑

完全可以直接在模板字符串的${}占位符内实现多条件判断，不需要强制依赖switch、split()等方法，之前用||写法没生效，基本是逻辑运算符用错、或者运算符优先级没处理对导致的。

核心写法说明 #

模板字符串的占位符支持放入任意合法的JavaScript表达式，只要表达式最终能返回一个可输出的值即可，三元运算符的判断位置也支持写多条件组合逻辑，只需要注意两点：

• 明确逻辑关系：要求「值不等于0 且 不等于1时加s」，是“同时满足两个条件”的逻辑，要使用&&（逻辑与）而不是||（逻辑或）。如果误用||，只要值满足“不等于0”或“不等于1”其中一个条件就会加s，值为1时会因为满足“不等于0”错误加上s，值为0时会因为满足“不等于1”错误加上s，完全不符合预期。
• 建议给判断条件整体包裹括号，避免运算符优先级导致逻辑异常，也能提升代码可读性。

对应代码实现 #

你需要的「0和1都用单数，其他值用复数」的效果，直接修改占位符内的判断条件即可：

const d = new Date()
const [h,m,s] = [d.getHours(), d.getMinutes(), d.getSeconds()]
divid.innerHTML = `Agora são ${h} hora${(h !== 0 && h !== 1) ? "s" : ""}, ${m} minuto${(m !== 0 && m !== 1) ? "s" : ""} e ${s} segundo${(s !== 0 && s !== 1) ? "s" : ""}!`

更易维护的优化写法 #

如果后续单复数规则变复杂（比如存在不规则变形、不同语言单复数规则差异），重复写三元判断会让模板字符串变得难维护，可以抽一个极简的单复数处理函数，直接在占位符里调用即可：

// 单复数匹配工具函数
const getPlural = (num, singularText, pluralText) => num === 1 ? singularText : pluralText

// 模板中直接调用
divid.innerHTML = `Agora são ${h} ${getPlural(h, 'hora', 'horas')}, ${m} ${getPlural(m, 'minuto', 'minutos')} e ${s} ${getPlural(s, 'segundo', 'segundos')}!`

补充说明：占位符内甚至支持嵌套三元运算、执行简单计算、调用任意自定义函数，只要符合JS语法就可以正常运行，没有特殊的语法限制。

内容的提问来源于stack exchange，提问作者Rodhis