JavaScript中字符串搭配&&与||声明变量时输出表现差异问题

你遇到的行为差异和&&/||的求值顺序无关——二者都是严格从左到右执行求值，差异来自两个JavaScript基础规则：运算符优先级、逻辑运算符短路返回特性。 #

核心规则先明确 #

• 运算符优先级：加法+的优先级高于&&、||，表达式中字符串拼接会优先于逻辑运算执行
• 逻辑运算符短路规则：
  • a || b：从左到右求值，若左侧a为真值（转布尔值为true），直接返回a，不再执行右侧逻辑；若左侧为假值，返回右侧b的结果
  • a && b：从左到右求值，若左侧a为假值，直接返回a，不再执行右侧逻辑；若左侧为真值，返回右侧b的结果

逐行拆解你的代码表现 #

你的测试代码如下：

const passDriversLicense = true;
const hasGoodVision = false;

//OR 测试
let shouldDrive = ('1 ' + passDriversLicense || hasGoodVision);
console.log(`${shouldDrive} that she should drive`) 
// 输出 "1 true that she should drive"

//AND 测试
shouldDrive = ('2 ' + passDriversLicense && hasGoodVision);
console.log(`${shouldDrive} that she should drive`); 
// 输出 "false that she should drive"，和预期不符

//修改后的写法
shouldDrive = ('1 ' + passDriversLicense && '1 ' + hasGoodVision);
console.log(`${shouldDrive} that she should drive`);

1. OR场景的表现原因
   先执行优先级更高的字符串拼接：'1 ' + passDriversLicense得到非空字符串'1 true'，非空字符串是真值，触发||短路，直接返回左侧的拼接结果，所以输出带前缀。
2. 原AND场景不符合预期的原因
   同样先执行左侧拼接得到'2 true'，这是真值，&&不会返回左侧结果，会继续执行右侧逻辑，直接返回右侧变量hasGoodVision的原始布尔值false，左侧拼接的字符串没有作为最终结果返回，自然不会显示前缀。
3. 你修改后的写法问题
   这个写法确实能输出带前缀的1 false that she should drive，但逻辑完全错误：非空字符串永远是真值，只要左侧拼接结果是字符串，&&永远会返回右侧的拼接结果，完全丢失了&&本来要实现的「两个条件同时满足才成立」的判断逻辑。

正确写法 #

逻辑判断和展示格式化要分开处理，不要把字符串拼接和逻辑运算混写，避免优先级导致的非预期结果：

const passDriversLicense = true;
const hasGoodVision = false;

// 先单独完成逻辑判断
const andCheck = passDriversLicense && hasGoodVision;
// 输出时再统一拼接前缀
console.log(`2 ${andCheck} that she should drive`); // 输出 2 false that she should drive

const orCheck = passDriversLicense || hasGoodVision;
console.log(`1 ${orCheck} that she should drive`); // 输出 1 true that she should drive

如果一定要写在同一个表达式里，需要给逻辑运算部分加括号提升优先级，让逻辑判断先执行，再做拼接：

// 括号内逻辑优先执行，再拼接字符串
const shouldDrive = '2 ' + (passDriversLicense && hasGoodVision);

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