如何避免JavaScript模板字面量中条件表达式渲染输出false值

我使用了如下模板字面量：

`<div class="date ${($.inArray(date, dates) == -1) && `outside`}"> 
<div>${date.format('D')}</div> 
</div>`

当表达式($.inArray(date, dates) == -1)求值为true时，会正常显示outside类；但当该表达式求值为false时，会输出false字符串。请问如何避免输出false值？

嘿，这个问题其实是JavaScript里&&逻辑与运算符的特性搞的鬼：当左侧表达式结果为false时，整个&&表达式会直接返回左侧的false值，而不是你想要的空内容。给你几个实用的解决办法：

• 用三元运算符（最推荐）：直接明确指定条件成立时返回outside，不成立时返回空字符串，可读性拉满，谁看都懂

  `<div class="date ${($.inArray(date, dates) == -1) ? `outside` : ``}"> 
  <div>${date.format('D')}</div> 
  </div>`
  

• 用逻辑或||兜底：利用false || ''会返回空字符串的特性，给&&表达式加个兜底，这样条件不满足时就会输出空了

  `<div class="date ${($.inArray(date, dates) == -1) && `outside` || ``}"> 
  <div>${date.format('D')}</div> 
  </div>`
  

• ES2020+环境可以用空值合并运算符：不过这个场景下不如前两种直接，需要配合三元先转成可选值，如果你项目支持ES2020及以上可以试试：

  `<div class="date ${($.inArray(date, dates) == -1) ? `outside` : undefined ?? ``}"> 
  <div>${date.format('D')}</div> 
  </div>`
  

个人最推荐三元运算符的写法，逻辑清晰，后续维护代码的人一眼就能get你的意图，不会产生困惑。

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