TypeScript 中 如果为 Null,则设置默认值

在 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)中的虚假值是 undefinednull0false、**””(空字符串)、NaN**(不是数字)。

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

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