TypeScript 中合并运算符??

在 TypeScript 中，合并运算符（??） 是一种逻辑运算符，用于在变量为 null 或 undefined 时提供默认值。它让代码在处理“空值”场景时更加简洁、清晰、可预测。

一、语法说明

合并运算符由两个问号组成：

变量 ?? 默认值

该运算符的逻辑是：如果左侧的值是 null 或 undefined，则返回右侧的默认值；否则返回左侧的值本身。

⚠️ 注意：与逻辑或运算符（||）不同，??不会将 0、false 或空字符串 "" 视为“空值”。

二、实用示例

示例 1：函数中的默认值设置

以下函数通过 Nullish 合并运算符为 input 参数设置了默认值 100：

function displayValue(input?: number) {
  const value = input ?? 100;
  console.log(value);
}
displayValue();     // 输出 100
displayValue(50);   // 输出 50

在 displayValue() 中未传入参数，input 是 undefined，因此使用了默认值 100。而在传入 50 时，使用的是实际值。

示例 2：对象属性默认值设置（常用于 JSON）

当从 JSON 或其他外部数据源获取对象时，某些字段可能缺失。可以使用 ?? 为这些属性设定默认值。

interface Settings {
  volume?: number;
  brightness?: number;
}
const userSettings: Settings = {
  volume: 0
};
const volume = userSettings.volume ?? 50;
const brightness = userSettings.brightness ?? 75;
console.log(`Volume: ${volume}`);         // 输出 Volume: 0
console.log(`Brightness: ${brightness}`); // 输出 Brightness: 75

volume 的值为 0，虽然是假值，但不是 null 或 undefined，因此不会使用默认值 50。
brightness 没有定义，因此使用了默认值 75。

三、浏览器支持情况

Nullish 合并运算符在大多数现代浏览器中已经得到支持：

• ✅ Google Chrome 80+
• ✅ Microsoft Edge 80+
• ✅ Firefox 72+
• ✅ Safari 13.1+
• ✅ Opera 67+

🎯 TypeScript 会将 ?? 编译为兼容 JavaScript 语法，确保在较老环境中依然可运行（需配置合适的编译目标）。

四、总结

合并运算符（??）是 TypeScript 中处理 null 与 undefined 值的利器，特别适合用于：

• 函数参数默认值
• 对象属性默认值
• 用户配置合并

它使得代码更加健壮，避免不必要的类型判断。是开发现代前端和后端应用时不可或缺的一部分。

如果你正在使用 TypeScript 开发项目，建议立刻开始使用 ?? 运算符，让你的代码更简洁，更可控！

到此这篇关于TypeScript 中合并运算符??的文章就介绍到这了,更多相关TypeScript 合并运算符内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论