基于flag值构建字符串遇问题：flag为false时多余显示false

这个问题我之前也踩过坑！核心原因是JavaScript里逻辑与&&的行为特性：当flag为false时，flag && '|hatchback'这个表达式会直接返回false，而模板字符串会把这个布尔值自动转为字符串"false"，所以才会出现你看到的多余false。

修复方案 #

最直接清晰的方法是用三元运算符替代&&，明确指定flag为false时返回空字符串：

return `${super.getDetails()} Electric: ${this.isElectric} ${flag ? '|hatchback' : ''}`;

如果追求更好的可读性（尤其是当后续条件变复杂时），可以把拼接部分单独抽出来：

const hatchbackSuffix = flag ? ' |hatchback' : '';
return `${super.getDetails()} Electric: ${this.isElectric}${hatchbackSuffix}`;

为什么原来的代码会出问题？ #

再仔细拆解下&&的逻辑：

• 当flag为true时，&&会返回第二个操作数'|hatchback'，这完全符合你的预期；
• 当flag为false时，&&会直接返回第一个操作数false，模板字符串会把这个布尔值转成字符串"false"，所以最终结果就多了个不必要的false。

用三元运算符可以明确控制两种情况的返回值，彻底避免意外的布尔值转字符串问题。

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