JS 三元运算符与??

学习 ?: 和 ?? 空值合并运算符 · 难度：入门 · +10XP

JS 三元运算符与??

JavaScript 三元运算符与空值合并

学习前的准备

打开浏览器控制台（F12）动手练习。本教程适合已经了解 if/else 语句的初学者。我们将学习两种非常实用的简洁写法：三元运算符（? :）和空值合并运算符（??）。

三元运算符 — 一行代码的 if...else

let age = 20;
let status = age >= 18 ? '成年' : '未成年';
console.log(status);  // '成年'
let score = 75;
let result = score >= 60 ? '及格' : '不及格';
console.log(result);  // '及格'
let isLogged = true;
let btnText = isLogged ? '退出' : '登录';

空值合并运算符 ??（ES2020）

?? 和 || 很像，但有一个关键区别：|| 会把 0、''、false、NaN 都当作假值，而 ?? 只关心 null 和 undefined。

let count = 0;
let display = count || 10;
console.log(display);  // 10（0 被错误替换了！）
let display2 = count ?? 10;
console.log(display2); // 0（正确！0 被保留）
console.log(0 ?? 5);     // 0
console.log('' ?? '默认');   // ''（空字符串是合法值）

可选链 ?. （ES2020）

?. 允许你安全地访问深层嵌套的属性，如果中间某个值为 null 或 undefined，返回 undefined 而不是报错。

const user = { name: '王五', address: { city: '上海' } };
let zip = user?.address?.zip;
console.log(zip);  // undefined（而不是报错）
let city = user?.address?.city ?? '未知城市';
console.log(city);  // '上海'
let phone = user?.contact?.phone ?? '无联系方式';
console.log(phone); // '无联系方式'

小结

三元运算符 ? : 是 if/else 的简写。?? 只检查 null/undefined，不会把 0、''、false 误判为缺少值。?. 可选链让你安全访问嵌套属性。这三个简写语法组合使用，能让你的代码既简洁又健壮。