JS ?? 和 ||

马黑黑

在 JavaScript，双问号 ?? 是空值合并运算符，双竖杠 || 是逻辑或运算符，OR。二者同属于逻辑运算符，语法结构一致：

function sayHi(user) {
    return `Hi ${user ?? '某某'}！`;
}

function sayHello(user) {
    return `Hello ${user || '某某'}！`;
}

console.log(sayHi()); // -> Hi 某某！
console.log(sayHi('李四')); // -> Hi 李四！
console.log(sayHello()); // -> Hello 某某！
console.log(sayHello('李四')); // -> Hello 李四！
    

上例的两个函数：

其一：sayHi(user) 返回一个问候语，如果参数 user 调用者按预期传值（字符串值或能转为字符串的值），则使用双问号 ?? 前的 user 作为问候对象，如果不传值或所传值为 null/undefined，问候对象就用“某某”代替。换言之，空值合并运算符 ?? 之前的值若已定义，用它，若值未定义，即为 null 或 undefined 则用“某某”代替。再换言之，函数 sayHi(user) 的 return 语句通过双问号空值合并运算符将两种可能合并成一个值，要么是传参值，要么是“某某”。再体会以下不同形式的 sayHi 调用：

// 空值属于已定义
console.log(sayHi('')); // -> Hi ！

// true/false属于已定义
console.log(sayHi(true)); // -> Hi true！
console.log(sayHi(false)); // -> Hi false！

// null未定义
console.log(sayHi(null)); // -> Hi 某某！

// undefined 未定义
console.log(sayHi(undefined)); // -> Hi 某某！
    

其二：sayHello(user) 函数，return 语句语法结构和双问号的一致。作为逻辑或运算符，双竖杠工作机制是，若 user 不为空（''）、不为 0、不为假（false）、不为未定义（null和undefined）就用它，否则用“某某”。体会更多的 sayHello 调用：

 // 0
console.log(sayHello(0)); // -> Hello 某某！

// 非 0
console.log(sayHello(2)); // -> Hello 2！
console.log(sayHello(-0.5)); // -> Hello -0.5！

// 空值
console.log(sayHello('')); // -> Hello 某某！

// 空格值
console.log(sayHello(' ')); // -> Hello ！

// true/false
console.log(sayHello(true)); // -> Hello true！
console.log(sayHello(false)); // -> Hello 某某！

// null/undefined
console.log(sayHello(null)); // -> Hello 某某！
console.log(sayHello(undefined)); // -> Hello 某某！
    

总而言之，双问号和双竖杠运算符都是逻辑运算符，二者语法结构相同，用于确定变量赋值（符号前的值合规，用它，反之用符号后给定的预设值）；具体用法在规范上不尽相同，主要区别是，双问号前的值只要不是 null 或 undefined 就用它，反之就用后面设定的值；双竖杠管的宽一些，前面的值包含 ''、0、false、null、undefined 等，是这些值中的任意一个，就取 || 右侧预定义的值，否则取符号左侧的值。依此，现实应用中应灵活选用空值合并运算符或逻辑或运算符。

梦江南

谢谢黑黑老师辛苦，学习了。