三元运算符核心价值是将“判断+赋值”压缩为一行表达式，适用于简单条件取值、默认值兜底、有限多分支、函数参数及模板插值等场景，提升语义聚焦与代码紧凑性。

三元运算符最直接的价值，就是把“判断+赋值”两步压缩成一行表达式，尤其适合单一变量根据简单条件取不同值的场景。它不是为了炫技，而是让代码更聚焦于“要什么”，而不是“怎么走流程”。

基础赋值：替代单层 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'}!`
• 优势：消除临时变量，减少作用域污染，逻辑与使用位置紧耦合