← 返回目录

10. 三元表达式

三元表达式就是一行搞定的 if...else，"二选一存个值"特别顺手。本页练基础和嵌套两种写法。

10.1 互动演示

10.2 知识点逐条讲解（配合代码）

① 三元表达式：一行版的 if...else

有时候你只想"二选一并把结果存进变量"，写 if...else 要四五行太啰嗦。三元表达式就是一行搞定，语法：条件 ? 对了取这个 : 错了取那个。

// 库存 stock=50，大于0输出"有货"，否则"缺货"
let stock = 50;
let status = stock > 0 ? "有货" : "缺货";
//           ↑对不对   ↑对了      ↑错了
console.log(status); // 有货
		

它和 if...else 干的事一样，但更适合"选一个值存下来"，省掉好几行。

② 嵌套三元：加括号把分层标清楚

判断有好几层时，可以套三元。建议每层用括号括起来，一眼看出哪层管哪层。

// 价格分级：大于等于200 高价；大于等于100 中价；其余 低价
let price = 135;
let tag = price >= 200 ? "高价"
		: (price >= 100 ? "中价" : "低价");
//  ↑第一层不对，就进括号里那层继续判断
console.log(tag); // 中价
		

如果你把三四层三元不加括号地串一起，代码虽然能跑，但读起来要来回找冒号，很容易看错。层级一多就别硬套三元，改回 if...else if 更清楚。

实战：用在哪 / 常见坑 / 怎么解决

① 可能在什么地方用：有货/缺货小标签；价格高中低标签；男女切换图标。

② 常见的问题：套了三四层三元，自己过两天都看不懂。

③ 解决思路：超过两层就改回 if...else；嵌套一定要加括号把每一层标清楚。