`truthy` och `falsy` i TypeScript

I den här artikeln kommer vi att förklara truthy och falsy i TypeScript.

YouTube Video

truthy och falsy i TypeScript

Begreppen truthy och falsy i TypeScript spelar en mycket viktig roll i programmets villkorssatser. Här kommer vi att förklara dessa begrepp i detalj och hur de faktiskt används. Dessutom tillhandahåller vi specifika TypeScript-kodexempel för att förstå hur truthy och falsy värden hanteras.

Vad är truthy och falsy?

I JavaScript och TypeScript utvärderas alla värden som sant (true) eller falskt (false) i ett villkorsuttryck. Dessa värden klassificeras logiskt som truthy eller falsy.

• truthy avser värden som utvärderas som sant i villkorsuttryck.
• falsy avser värden som utvärderas som falskt i villkorsuttryck.

I TypeScript behandlas följande värden som falsy:.

2. Siffran 0
3. "" (tom sträng)

Alla andra värden behandlas som truthy.

Specifika exempel på truthy och 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");

Villkor med truthy och falsy

Begreppen truthy och falsy används ofta i villkorssatser och loopar. Till exempel kan du använda dessa värden direkt i if-satser eller while-loopar för enkla villkorsutvärderingar.

 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}

Hantering av falsy värden med ?? (Nullish Coalescing) och || (Logisk ELLER)

I TypeScript finns det flera operatorer som är användbara när man hanterar falsy-värden. I synnerhet används ofta Nullish Coalescing-operatorn (??) och den logiska ELLER-operatorn (||).

|| (Logiskt ELLER)

Den logiska ELLER-operatorn används för att ersätta falsy-värden med ett standardvärde. Dock riktar sig alla falsy-värden (inte bara null eller undefined, utan även 0, "", etc.).

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

??（Nullish Coalescing）

Nullish Coalescing-operatorn tillämpar ett standardvärde endast på null eller undefined, och lämnar andra falsy-värden (som 0 eller "") oförändrade.

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

Fallgropar relaterade till truthy och falsy

Ett viktigt att tänka på när man förstår truthy och falsy är att oavsiktliga värden kan behandlas som falsy. Till exempel är 0 och tomma strängar "" giltiga värden, men de betraktas som falsy i villkorsuttryck, vilket kan leda till felaktiga utvärderingar.

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}

I sådana fall gör användning av strikta jämförelseoperatorer det möjligt att noggrant särskilja värden som 0 och false.

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

Fallgropar relaterade till falsy och NaN

NaN kräver särskild hantering eftersom det inte är lika med något värde, inklusive sig självt, när man använder jämförelseoperatorer.

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

Därför är det säkrare att använda Number.isNaN() för att exakt detektera NaN.

 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}

Således är NaN inte ens lika med sig självt, så jämförelser med NaN returnerar alltid false. Genom att använda Number.isNaN() istället kan du utföra mer tillförlitliga kontroller.

Slutsats

Begreppen truthy och falsy i TypeScript är mycket praktiska, men du måste vara försiktig med vissa värden, särskilt 0 och tomma strängar. När dessa värden används i villkorskontroller kan användning av strikt jämförelse (===) eller Nullish Coalescing-operatorn (??) istället för lös jämförelse (==) hjälpa till att undvika oväntat beteende.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video