`Truthy` und `Falsy` in TypeScript

In diesem Artikel werden wir Truthy und Falsy in TypeScript erklären.

YouTube Video

Truthy und Falsy in TypeScript

Die Konzepte von Truthy und Falsy in TypeScript spielen eine sehr wichtige Rolle in bedingten Programmanweisungen. Hier werden wir diese Konzepte im Detail erklären und zeigen, wie sie tatsächlich verwendet werden. Darüber hinaus stellen wir spezifische TypeScript-Codebeispiele bereit, um zu verstehen, wie Truthy- und Falsy-Werte gehandhabt werden.

Was sind Truthy und Falsy?

In JavaScript und TypeScript wird jeder Wert in einem bedingten Ausdruck als wahr (true) oder falsch (false) bewertet. Diese Werte werden logisch als Truthy oder Falsy klassifiziert.

• truthy bezeichnet Werte, die in Bedingungsausdrücken als true ausgewertet werden.
• falsy bezeichnet Werte, die in Bedingungsausdrücken als false ausgewertet werden.

In TypeScript werden die folgenden Werte als Falsy behandelt:.

2. Die Zahl 0
3. "" (leerer String)

Alle anderen Werte werden als Truthy behandelt.

Spezifische Beispiele für truthy und 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");

Bedingungen mit truthy und falsy

Die Konzepte von Truthy und Falsy werden häufig in Bedingungen und Schleifen verwendet. Zum Beispiel können Sie in if-Anweisungen oder while-Schleifen diese Werte direkt für einfache Bedingungsbewertungen verwenden.

 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-Werte mit ?? (Nullish Coalescing) und || (Logisches ODER) behandeln

In TypeScript gibt es mehrere Operatoren, die nützlich sind, wenn es um den Umgang mit Falsy-Werten geht. Insbesondere werden der Nullish Coalescing Operator (??) und der logische ODER-Operator (||) häufig verwendet.

|| (Logisches ODER)

Der logische ODER-Operator wird verwendet, um falsy-Werte durch einen Standardwert zu ersetzen. Dabei werden jedoch alle Falsy-Werte (nicht nur null oder undefined, sondern auch 0, "", usw.) berücksichtigt.

1let username = "";
2let displayName = username || "Guest"; // Since username is empty, "Guest" is assigned
3
4console.log(displayName); // "Guest"

??（Nullish Coalescing）

Der Nullish Coalescing Operator verwendet einen Standardwert nur für null oder undefined, während andere falsy-Werte (wie 0 oder "") unverändert bleiben.

1let username2 = "";
2let displayName2 = username2 ?? "Guest";
3// The empty string is retained
4// since username2 is not null or undefined
5
6console.log(displayName2); // ""

Fallstricke im Zusammenhang mit truthy und falsy

Ein wichtiger Punkt beim Verstehen von truthy und falsy ist, dass unbeabsichtigte Werte als falsy behandelt werden können. Zum Beispiel sind 0 und leere Zeichenketten "" gültige Werte, aber sie werden in Bedingungsausdrücken als falsy angesehen, was zu falschen Bewertungen führen kann.

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}

In solchen Fällen ermöglichen es Ihnen strikte Vergleichsoperatoren, Werte wie 0 und false genau zu unterscheiden.

1let score = 0;
2
3if (score === 0) {
4    console.log("Score is zero"); // Correctly evaluated
5}

Fallstricke im Zusammenhang mit falsy und NaN

NaN erfordert eine spezielle Behandlung, da es bei der Verwendung von Vergleichsoperatoren keinem Wert, einschließlich sich selbst, gleich ist.

1console.log("NaN === NaN:", NaN === NaN); // false

Daher ist es sicherer, Number.isNaN() zu verwenden, um NaN genau zu erkennen.

 1// Bad Example
 2let value = parseInt("0");
 3if (!value) {
 4    console.log("Value is NaN"); // Incorrectly treats 0 as NaN
 5}
 6
 7// Good Example
 8let value2 = parseInt("hello");
 9if (Number.isNaN(value2)) {
10    console.log("Value is NaN"); // Correctly identifies NaN
11}

NaN ist somit nicht einmal sich selbst gleich, weshalb Vergleiche mit NaN immer false zurückgeben. Durch die Verwendung von Number.isNaN() können Sie zuverlässigere Prüfungen durchführen.

Fazit

Die Konzepte von truthy und falsy in TypeScript sind sehr nützlich, aber Sie müssen bei bestimmten Werten, insbesondere 0 und leeren Zeichenketten, vorsichtig sein. Beim Verwenden dieser Werte in Bedingungsabfragen kann die Verwendung von striktem Vergleich (===) oder des Nullish Coalescing Operators (??) anstelle von losem Vergleich (==) helfen, unerwartetes Verhalten zu vermeiden.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video