三元运算符核心价值是将“判断+赋值”压缩为一行表达式，适用于简单条件取值、默认值兜底、有限多分支、函数参数及模板插值等场景，提升语义聚焦与代码紧凑性。
三元运算符最直接的价值，就是把“判断+赋值”两步压缩成一行表达式，尤其适合单一变量根据简单条件取不同值的场景。它不是为了炫技，而是让代码更聚焦于“要什么”，而不是“怎么走流程”。
基础赋值：替代单层 if-else
当只需要根据一个布尔条件决定变量取值时，三元运算符比 if-else 更紧凑、语义更集中。
- 写法：const status = isActive ? 'online' : 'offline';
- 对比传统写法：需声明变量、写 if 块、再写 else 块，至少四行
- 关键点：condition 必须能明确转为布尔值；两个分支表达式类型尽量一致，避免隐式转换引发意外
默认值设置：处理可能为空或未定义的值
这是高频使用场景，比如从对象属性、API 响应或用户输入中取值并兜底。
- 写法：const userName = user?.name ?? 'Anonymous';（注意：?? 是空值合并运算符，与三元不同；若用三元则为 user && user.name ? user.name : 'Anonymous'）
- 适用情形：数据结构不确定、接口字段可能缺失、表单字段可选
- 提醒：对 null/undefined 的判断，优先考虑 ?? 运算符；若逻辑含额外条件（如字符串非空才用），再用三元
嵌套与链式：应对有限层级的多条件分支
当有三到四个互斥选项时，嵌套三元比多个 if-else 更轻量，但不宜超过两层。
- 写法：const grade = score >= 90 ? 'A' : score >= 80 ? 'B' : score >= 70 ? 'C' : 'F';
- 等效逻辑：相当于 if-else if-else if-else，但无缩进、无花括号
- 注意事项：右结合性决定执行顺序，建议加括号提升可读性，例如 (score >= 90) ? 'A' : (score >= 80) ? 'B' : 'C'
函数参数与模板插值：让条件逻辑融入表达式流
三元运算符是表达式，天然支持嵌入函数调用、JSX、模板字符串等上下文，无需提前声明中间变量。
- 函数调用：fetchData(isAdmin ? '/admin/users' : '/public/posts');
- JSX 中控制类名：className={`button ${isPrimary ? 'primary' : 'secondary'}`}
- 模板字符串：`Hello, ${isLoggedIn ? userName : 'Guest'}!`
- 优势：消除临时变量，减少作用域污染，逻辑与使用位置紧耦合
