迹忆客 专注技术分享

在 TypeScript 中如果为 null，则使用 nullish 合并运算符 (??) 设置默认值，例如 const result = role ?? 'developer';。 当左侧的值为 null 或 undefined 时，nullish 合并运算符返回其右侧操作数。

const role: string | null = null;

const result1 = role ?? 'developer';
console.log(result1); // 👉️ "developer"

考虑空值合并运算符 (??) 的一种简单方法是，如果左侧的值等于 null 或 undefined ，它允许我们提供一个备用值。

如果左侧的值不为 null 或 undefined ，则运算符按原样返回该值。

const result1 = 'accountant' ?? 'developer';
console.log(result1); // 👉️ "accountant"

另一种方法是使用三元运算符显式检查值是否等于 null。

const role: string | null = null;

const result2 = role === null ? 'tester' : role;
console.log(result2); // 👉️ "tester"

如果问号左边的表达式为真，则三元运算符返回冒号左边的值，否则返回冒号右边的值。

换句话说，如果角色变量存储了一个空值，那么三元运算符返回 tester，否则我们返回存储在 role 变量中的值。

请注意，我们使用了严格相等运算符 ===。 我们可能还会在网上看到使用松散相等 == 的示例。

const role: string | null = null;

const result2 = role == null ? 'tester' : role;
console.log(result2); // 👉️ "tester"

上述示例之间的区别在于，松散相等 == 运算符同时检查 null 和 undefined，而严格相等 === 仅检查特定值（示例中为 null）。

一种可视化的简单方法是使用运算符来比较 null 和 undefined。

console.log(null == undefined); // 👉️ true
console.log(null === undefined); // 👉️ false

该示例显示，当使用松散相等运算符 == 时，null 等于 undefined。

如果变量存储空值，我们还可以使用逻辑 OR || 运算符提供默认值。

const role: string | null = null;

const result3 = role || 'designer';
console.log(result3); // 👉️ "designer"

如果左边的值是假的，则逻辑 OR || 运算符返回右边的值。

这与我们在第一个示例中使用的空值合并运算符有点不同，因为逻辑或 || 运算符检查值是否为假，而空值合并运算符 ?? 检查值是 null 值还是 undefined 。

JavaScript（和 TypeScript）中的虚假值是 undefined、null、0、false、""（空字符串） 、NaN （不是数字）。

这意味着如果左侧的值是上述 6 个虚假值中的任何一个，逻辑 OR || 运算符将返回右侧的值。

另一方面，只有当左边的值为 null 或 undefined 时，nullish 合并运算符才会返回右边的值。