三元运算符适合用于仅有两个分支、各分支均返回值且逻辑简单的单层if-else场景；需注意优先级，必要时加括号确保语义明确。
三元运算符（? :）是 JavaScript 中简化单层 if-else 分支的语法糖，适合用于赋值、返回值或简单逻辑判断，让代码更紧凑可读。
什么时候适合用三元运算符
当满足以下所有条件时，三元运算符是安全且推荐的替代方式：
- 只有两个分支（无
else if或多路判断） - 每个分支都返回一个值（而不是执行复杂语句或副作用）
- 逻辑足够简单，一行内能清晰表达（建议总长度不超过 80 字符）
基础写法与常见误用
标准结构：condition ? exprIfTrue : exprIfFalse
✅ 正确示例：
立即学习“Java免费学习笔记（深入）”；
const status = score >= 60 ? 'pass' : 'fail';
const message = user ? `Hello, ${user.name}` : 'Guest';
❌ 避免嵌套过深或混入语句：
// 不推荐：可读性差，难调试
const result = a > 0 ? (b > 0 ? 'both positive' : 'a only') : (b > 0 ? 'b only' : 'neither');
// 错误：三元运算符不能直接执行函数调用作为分支（除非你明确要它的返回值）
score < 60 ? alert('Fail!') : console.log('OK'); // 虽然能运行，但违背“返回值”本意
替代 if-else 的典型场景
以下情况用三元比 if-else 更自然：
- 变量初始化：根据条件给变量设默认值或切换值
- JSX/模板中内联判断：React/Vue 等框架中控制渲染内容
- 函数返回值：箭头函数单行返回时保持简洁
例如：
const price = isMember ? 99 : 129;
return <div>{isLoggedIn ? <Dashboard /> : <LoginButton />}</div>;
const getGrade = score => score >= 90 ? 'A' : score >= 80 ? 'B' : 'C'; // 单层链式可接受，但超三层建议用 switch 或 map
注意优先级与括号使用
三元运算符优先级低于大多数运算符（如 +、==、逻辑运算符），容易出错。不确定时加括号：
// ❌ 可能不符合预期（先算 a + b > 5，再三元） const res = a + b > 5 ? 'big' : 'small'; // ✅ 明确意图 const res = (a + b) > 5 ? 'big' : 'small'; // ❌ 混淆逻辑优先级 const flag = condition ? true : false && other; // 相当于 condition ? true : (false && other) // ✅ 加括号避免歧义 const flag = condition ? true : (false && other);
