JavaScript双问号操作符详解：??与||的类型安全之争

一、逻辑或操作符（||）的类型转换陷阱

在JavaScript开发中，逻辑或操作符（||）长期被用作”默认值赋值”的快捷方式。其基本行为是：当左侧表达式为假值（falsy）时，返回右侧表达式。这种设计在简单场景下极为便利，但隐藏着严重的类型安全隐患。

1.1 假值（Falsy）的完整清单

JavaScript将以下值视为假值：

• false
• 0 / -0 / 0n（BigInt零）
• ""（空字符串）
• null
• undefined
• NaN

当使用||设置默认值时，任何假值都会触发默认值返回，这可能导致非预期的行为。例如：

function getUserCount(count) {
  return count || 10; // 当count=0时错误返回10
}
console.log(getUserCount(0)); // 预期0，实际10

1.2 实际开发中的典型问题

在API数据处理的场景中，这种类型转换可能引发严重错误：

// 模拟API返回
const apiResponse = {
  status: 200,
  data: null, // 实际可能返回null表示空数据
  message: ""
};
// 不安全的默认值处理
const safeData = apiResponse.data || { default: true };
console.log(safeData); // 意外返回{ default: true }

当业务逻辑需要区分null（明确无数据）和undefined（未设置）时，||操作符完全抹杀了这种语义差异。

二、空值合并操作符（??）的语义突破

ES2020引入的空值合并操作符（??）专门解决了上述问题。其核心规则是：仅当左侧为null或undefined时，才返回右侧值。

2.1 与||的对比测试

const tests = [
  { input: 0,        ||: 10, ??: 0 },
  { input: "",       ||: 10, ??: "" },
  { input: false,    ||: 10, ??: false },
  { input: null,     ||: 10, ??: 10 },
  { input: undefined,||: 10, ??: 10 }
];
tests.forEach(test => {
  console.log(`输入: ${test.input} | ||结果: ${test.input || 10} | ??结果: ${test.input ?? 10}`);
});

输出结果清晰展示了??的类型保护特性：仅对null/undefined触发默认值。

2.2 运算符优先级与组合使用

??的优先级（3级）低于||（4级）和&&（6级），但高于赋值操作符。复杂表达式中建议使用括号明确意图：

const result = (a ?? b) || c; // 推荐明确括号

三、实际应用场景与最佳实践

3.1 配置对象默认值处理

function createApp(config = {}) {
  const defaults = {
    port: config.port ?? 3000,
    timeout: config.timeout ?? 5000,
    logger: config.logger ?? console.log
  };
  // ...
}

这种模式在库/框架开发中尤为重要，能准确区分”显式设置空值”和”未设置”两种情况。

3.2 与解构赋值的结合

const { 
  title = "默认标题", 
  views = 0, 
  author = "匿名" 
} = postData;
// 更精确的版本
const { 
  title = "默认标题", 
  views = 0, 
  author: authorName = "匿名" 
} = postData;
// 使用??的改进方案
const { 
  title = "默认标题", 
  views: viewCount = 0, 
  author: authorName ?? "匿名" 
} = postData;

3.3 性能考量与兼容性

现代JavaScript引擎已对??进行高度优化，性能与||相当。对于需要支持旧环境的项目，可通过Babel转译：

// babel.config.json
{
  "plugins": ["@babel/plugin-proposal-nullish-coalescing"]
}

四、进阶使用技巧

4.1 与可选链操作符（?.）的协同

// 安全访问嵌套属性并设置默认值
const street = user?.address?.street ?? "未知街道";

4.2 函数参数默认值

function connect({
  host = "localhost",
  port = 8080,
  retry = 3
} = {}) {
  const actualPort = port ?? 80; // 双重保护
  // ...
}

4.3 类型守卫模式

function ensureArray(value) {
  return Array.isArray(value) ? value : (value ?? []);
}

五、类型系统中的严格模式

在TypeScript中，??与类型守卫结合能提供更强的类型安全：

interface User {
  id: string;
  nickname?: string;
}
function getDisplayName(user: User) {
  return user.nickname ?? user.id; // 类型安全
}

六、浏览器兼容性策略

截至2023年，主流浏览器已全面支持??，但在以下场景仍需注意：

1. 旧版企业应用（IE11及以下）
2. 某些嵌入式JavaScript环境
3. 极端性能敏感场景（转译后代码体积增加约5%）

兼容方案推荐：

// 核心JS文件
const nullishCoalesce = (a, b) => a != null ? a : b;
// 使用示例
const port = nullishCoalesce(config.port, 3000);

七、未来发展趋势

随着ECMAScript标准的演进，??的语义正在向更多领域扩展：

1. 提案中的??=（空值合并赋值）操作符
2. 与记录（Record）和元组（Tuple）类型的深度集成
3. 模板字符串中的空值处理

结论

双问号操作符（??）的出现标志着JavaScript类型安全的重大进步。通过精确区分null/undefined与其他假值，它解决了长期存在的默认值处理难题。在实际开发中，建议遵循以下原则：

1. 新项目优先使用??替代||进行默认值处理
2. 维护旧项目时，逐步将关键路径的||替换为??
3. 在类型敏感的场景（如API响应处理）中强制使用??
4. 结合TypeScript使用以获得最佳类型安全体验

这种转变不仅能减少意外错误，更能提升代码的可维护性和语义清晰度，是现代JavaScript开发不可或缺的工具。