`truthy` 和 `falsy` 在 TypeScript 中
在本文中，我们将解释 TypeScript 中的 truthy 和 falsy。
YouTube Video
truthy 和 falsy 在 TypeScript 中
TypeScript 中的 truthy 和 falsy 概念在程序条件语句中起着非常重要的作用。这里，我们将详细解释这些概念以及它们的实际使用方法。此外，我们提供了具体的 TypeScript 代码示例，以帮助理解如何处理 truthy 和 falsy 值。
truthy 和 falsy 是什么？
在 JavaScript 和 TypeScript 中，任何值在条件表达式中都会被判定为真值（true）或假值（false）。这些值在逻辑上被分类为 truthy 或 falsy。
truthy指的是在条件表达式中被评估为true的值。falsy指的是在条件表达式中被评估为false的值。
在 TypeScript 中，以下值会被视为 falsy：。
- 数字
0 ""（空字符串）
其他所有值都被视为 truthy。
truthy 和 falsy 的具体例子
1// Examples of falsy values
2console.log("0 is", Boolean(0) ? "truthy" : "falsy");
3console.log('"" is', Boolean("") ? "truthy" : "falsy");
4console.log("null is", Boolean(null) ? "truthy" : "falsy");
5console.log("undefined is", Boolean(undefined) ? "truthy" : "falsy");
6console.log("NaN is", Boolean(NaN) ? "truthy" : "falsy");
7
8// Examples of truthy values
9console.log("1 is", Boolean(1) ? "truthy" : "falsy");
10console.log('"hello" is', Boolean("hello") ? "truthy" : "falsy");
11console.log("[] is", Boolean([]) ? "truthy" : "falsy");
12console.log('" " (space) is', Boolean(" ") ? "truthy" : "falsy");使用 truthy 和 falsy 的条件判断
truthy 和 falsy 概念经常被用于条件语句和循环中。例如，在 if 语句或 while 循环中，可以直接使用这些值来进行简单的条件判断。
1// Checking if the length of the array is 0
2let items: string[] = [];
3
4if (items.length) {
5 console.log("The array is not empty");
6} else {
7 console.log("The array is empty");
8}
9
10// Checking if the input value is empty
11let input = "";
12
13if (input) {
14 console.log("Input has value");
15} else {
16 console.log("Input is empty"); // This will be executed
17}使用 ??（空值合并运算符）和 ||（逻辑或）处理 falsy 值
在 TypeScript 中，有几个操作符在处理 falsy 值时非常有用。尤其是，常用的有空值合并运算符 (??) 和逻辑或运算符 (||)。
||（逻辑或）
逻辑或运算符用于用默认值替换 falsy 值。然而，所有被视为假值的值（不仅是null和undefined，还有0和空字符串""）也包含在内。
1let username = "";
2let displayName = username || "Guest";
3// Since username is empty, "Guest" is assigned
4
5console.log(displayName); // "Guest"
??（Nullish Coalescing）
空值合并运算符仅对null或undefined应用默认值，并按原样处理其他假值，例如0或空字符串""。
1let username2 = "";
2let displayName2 = username2 ?? "Guest";
3// The empty string is retained
4// since username2 is not null or undefined
5
6console.log(displayName2); // ""
与 truthy 和 falsy 相关的陷阱
在理解 truthy 和 falsy 时需要注意的一个关键点是，无意间的值可能会被视为 falsy。例如，0 和空字符串 "" 是有效的值，但在条件语句中它们被视为 falsy 值，这可能会导致错误的判断。
1let score = 0;
2
3if (score) {
4 console.log("You have a score!"); // This will not be executed
5} else {
6 console.log("No score available"); // This will be executed
7}在这种情况下，使用严格比较运算符可以准确区分像 0 和 false 这样的值。
1let score = 0;
2
3if (score === 0) {
4 console.log("Score is zero"); // Correctly evaluated
5}与 falsy 和 NaN 相关的陷阱
NaN 需要特殊处理，因为在使用比较运算符时，它不等于任何值，包括它本身。
1console.log("NaN === NaN:", NaN === NaN); // false
因此，使用 Number.isNaN() 进行准确检测 NaN 更为安全。
1// Bad Example
2let value = parseInt("0");
3if (!value) {
4 console.log("Value is NaN(Incorrect)"); // Incorrectly treats 0 as NaN
5}
6
7// Good Example
8let value2 = parseInt("hello");
9if (Number.isNaN(value2)) {
10 console.log("Value is NaN(Correct)"); // Correctly identifies NaN
11}因此，NaN 甚至不等于它自己，因此与 NaN 的比较总是返回 false。通过改为使用 Number.isNaN()，您可以进行更可靠的检查。
结论
TypeScript 中的 truthy 和 falsy 概念非常方便，但需要特别小心某些值，特别是 0 和空字符串。在条件检查中使用这些值时，使用严格比较 (===) 或空值合并运算符 (??) 而不是宽松比较 (==) 可以帮助避免意外行为。
您可以在我们的YouTube频道上使用Visual Studio Code跟随上述文章进行学习。 请也查看我们的YouTube频道。