0Pricing
TypeScript Academy · 课时

使用 ?? 进行空值合并

仅针对 null 和 undefined 提供备用值，而不是针对所有假值。

使用 ?? 进行空值合并 是 CoddyKit 上的免费 TypeScript Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 TypeScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 TypeScript Academy 课程共包含 4 节课。

空值合并运算符

?? 运算符仅在左侧是 null 或 undefined 时返回右侧；否则返回左侧的值。这是提供默认值的精确方式。

const name: string | null = null;
const display = name ?? 'Guest';
console.log(display); // 'Guest'

只有空值才触发回退

关键在于“空值”：只有 null 和 undefined 会导致使用右侧的值。其他所有值——包括假值——都会原样保留。

console.log(0 ?? 99);       // 0
console.log('' ?? 'x');     // ''
console.log(false ?? true); // false
console.log(null ?? 'def'); // 'def'

|| 的问题

逻辑 OR || 会对任何假值使用回退值：0、''、false、NaN，以及空值。这会在 0 或空字符串是有效输入时经常导致错误。

const count = 0;
console.log(count || 10); // 10 — wrong! 0 is a valid count
console.log(count ?? 10); // 0  — correct

正确处理默认值

当零、空字符串或 false 是您希望保留的合法值时，请使用 ??。只有在确实希望任何假值都触发回退时，才使用 ||。

function volume(v: number | undefined): number {
  return v ?? 50; // 0 stays 0, undefined becomes 50
}
console.log(volume(0), volume(undefined));

?? 与函数参数

一种常见模式是：当传入 undefined 时为可选参数提供默认值，同时保留有意义的假值输入。

function greet(name?: string): string {
  return 'Hello, ' + (name ?? 'friend');
}
console.log(greet('Ada'), greet());

?? 的结果类型

a ?? b 的类型会从 a 的类型中移除 null | undefined，再与 b 的类型合并。如果 a 是 string | null，而 b 是 string，结果就是 string。

const maybe: string | null = null;
const sure: string = maybe ?? 'default';
console.log(sure.toUpperCase());

串联默认值

您可以串联多个 ??，按顺序尝试多个来源；当某个值为空时，继续使用下一个来源。第一个非空值会胜出。

const fromEnv: string | undefined = undefined;
const fromConfig: string | null = null;
const value = fromEnv ?? fromConfig ?? 'hardcoded';
console.log(value);

?? 与优先级

不加括号时，不能将 ?? 与 || 或 && 混用——TypeScript 要求使用括号来避免歧义。请始终明确分组。

const a: number | null = null;
const b = true;
// const x = a ?? 5 || 10; // Error without parens
const x = (a ?? 5) || 10;
console.log(x);

区分零值与缺失值

现实中经常需要区分这两种情况：温度、分数或余额为 0 是有效数据，而 undefined 表示“未提供”。?? 会保留这种区别；|| 则会将它们混为一谈。

function format(temp: number | undefined): string {
  return (temp ?? 'N/A') + ' degrees';
}
console.log(format(0), format(undefined));

?? 与对象属性

读取可选属性并为其提供默认值，是 ?? 最常见的用法。它与可选链天然配合，您将在下一课中将两者结合使用。

type Opts = { retries?: number };
function run(o: Opts): number {
  return o.retries ?? 3;
}
console.log(run({ retries: 0 }), run({}));

如何选择

判断规则：如果 0、'' 或 false 是必须保留的有效值，请使用 ??。如果确实希望替换任何假值，请使用 ||。默认值错误几乎总是源于习惯性地使用 ||。

const username = '';
console.log(username || 'anon'); // 'anon' — empty replaced
console.log(username ?? 'anon'); // '' — empty kept

快速检查

检验您对空值合并的理解。

回顾：空值合并

您已了解到 ??：

  • 仅当左侧为 null 或 undefined 时才返回回退值。
  • 会保留 0、'' 和 false 等有效的假值——不同于 ||。
  • 会从结果类型中移除 null | undefined。
  • 与 || 或 && 混用时需要加括号。

接下来，我们将 ?. 与 ?? 结合使用。

function port(v: number | undefined): number {
  return v ?? 8080;
}
console.log(port(0), port(undefined));

常见问题解答

「使用 ?? 进行空值合并」课时是免费的吗？

是的 — 「使用 ?? 进行空值合并」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 TypeScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 TypeScript Academy 课程共包含 4 节课。

「使用 ?? 进行空值合并」这节课中我会学到什么？

仅针对 null 和 undefined 提供备用值，而不是针对所有假值。 你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 TypeScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 TypeScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。

「使用 ?? 进行空值合并」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 TypeScript Academy 课中编写并运行代码吗？

能。每节 TypeScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 使用 ?. 进行可选链调用
  2. 使用 ?? 进行空值合并
  3. 组合 ?. 与 ??
  4. 可选调用与元素访问
← 返回 TypeScript Academy