Nullish-sammanslagning-operator i TypeScript
I denna artikel kommer vi att förklara Nullish-sammanslagning-operator i TypeScript.
YouTube Video
Nullish-sammanslagning-operator i TypeScript
Nullish-sammanslagning-operatorn (??
) i TypeScript liknar JavaScripts short-circuit-utvärdering men används mer explicit för att tillhandahålla ett fallback-värde endast när vänstra sidan är null
eller undefined
. Denna operator låter dig enkelt kontrollera om ett värde är null
eller undefined
och ställa in ett standardvärde vid behov.
Nullish-sammanslagning-operatorn (??
) returnerar det högra värdet endast om vänstra sidan är null
eller undefined
. Detta tillåter att värden som false
, en tom sträng eller talet 0
utvärderas som de är. Detta är en stor skillnad från den traditionella logiska ELLER-operatören (||
). Denna operator introducerades i TypeScript 3.7.
Grundläggande syntax
Den grundläggande syntaxen är följande:.
1let result = value ?? defaultValue;
value
är målet som kontrolleras förnull
ellerundefined
.defaultValue
är värdet som returneras närvalue
ärnull
ellerundefined
.
Exempel på användning
1function getUserName(userName: string | null | undefined): string {
2 return userName ?? "Default User";
3}
4
5console.log(getUserName("Alice")); // Output: Alice
6console.log(getUserName(null)); // Output: Default User
7console.log(getUserName(undefined)); // Output: Default User
Här returnerar funktionen getUserName
"Standardanvändare"
om userName
är null
eller undefined
, annars returnerar den värdet av userName
.
Skillnad från den logiska ELLER-operatören
Det finns en viktig skillnad mellan nullish coalescing-operatorn och den logiska ELLER-operatorn. Den logiska ELLER-operatören behandlar värden som false
, 0
och ""
(tom sträng) som "falska," precis som null
och undefined
. Å andra sidan använder nullish-sammanslagning-operatorn endast null
och undefined
som fallback.
Exempel på den logiska ELLER-operatören
1function getUserAge(age: number | null | undefined): number {
2 return age || 18; // `0` also applies the default value
3}
4
5console.log(getUserAge(25)); // Output: 25
6console.log(getUserAge(0)); // Output: 18
7console.log(getUserAge(null)); // Output: 18
- Som visas returnerar den logiska ELLER-operatorn standardvärdet
18
även när värdet är0
.
Exempel på den nullish sammanslående operatören
1function getUserAge(age: number | null | undefined): number {
2 return age ?? 18; // `0` does not apply the default value
3}
4
5console.log(getUserAge(25)); // Output: 25
6console.log(getUserAge(0)); // Output: 0
7console.log(getUserAge(null)); // Output: 18
-
Å andra sidan returnerar nullish coalescing-operatorn det ursprungliga värdet även när det är
0
. -
Valet mellan den logiska ELLER-operatorn och nullish coalescing-operatorn beror på om
0
eller en tom sträng är acceptabelt. Till exempel, om du vill behålla en användares ålder som0
, måste du använda den nullish sammanslående operatören.
Kombination med typer
Du kan förbättra robustheten i din kod genom att utnyttja TypeScripts typsäkerhet i kombination med nullish-sammanslagning-operatorn. I följande exempel används standardvärden när vissa egenskaper är null
eller undefined
.
1interface User {
2 name: string;
3 age?: number | null;
4}
5
6function displayUserInfo(user: User): string {
7 const userName: string = user.name;
8 const userAge: number = user.age ?? 18;
9 return `Name: ${userName}, Age: ${userAge}`;
10}
11
12const user1: User = { name: "John", age: null };
13const user2: User = { name: "Doe" };
14
15console.log(displayUserInfo(user1)); // Output: Name: John, Age: 18
16console.log(displayUserInfo(user2)); // Output: Name: Doe, Age: 18
- I
User
-gränssnittet kan egenskapenage
vara ettnummer
,null
ellerundefined
, så nullish coalescing-operatorn används för att tilldela ett standardvärde på18
. - Under tiden tillåter egenskapen
name
endaststring
, så värdet används som det är.
Sammanfattning
- Den nullish sammanslående operatören hjälper till att sätta ett standardvärde endast när värdet är
null
ellerundefined
. Till skillnad från den traditionella logiska ELLER-operatorn behandlar den intefalse
,0
eller tomma strängar som 'falsy', vilket gör den särskilt användbar när du vill behålla dessa värden. Dessutom möjliggör kombinationen med TypeScripts typsystem skapandet av robustare och mer lättlästa kod. - Genom att effektivt använda operatorn för nullsammanfogning kan du på ett koncist sätt skriva logik för att sätta standardvärden samtidigt som du minskar onödiga
null
-kontroller.
Nullsammanfogande tilldelningsoperator i TypeScript
Den nullsammanfogande tilldelningsoperatorn (??=
) är en relativt ny operator som introducerats i TypeScript och som erbjuder ett bekvämt sätt att tilldela ett värde endast om variabeln är null
eller undefined
. Här förklarar vi hur denna operator fungerar, i vilka situationer den är effektiv samt ger exempel med kod.
Vad är den nullsammanfogande tilldelningsoperatorn
Den nullish sammanslående tilldelningsoperatören är en tilldelningsoperatör baserad på den nullish sammanslående operatören. Denna operator används för att tilldela ett nytt värde endast om variabeln är null
eller undefined
.
1let variable: string | null = null;
2variable ??= "Default Value"; // The variable is null,
3 // so the new value is assigned
4
5console.log(variable); // Output: "Default Value"
Genom att använda denna operator kan du skriva logiken "tilldela om variabeln är undefined eller null" mer koncist.
Jämförelse med traditionella tilldelningsmetoder
Utan den nullish sammanslående tilldelningsoperatören skulle du behöva använda en if
-sats eller en ternär operator för att uppnå samma beteende. Låt oss jämföra med de traditionella tilldelningsmetoderna.
Konventionell metod
Med hjälp av ett if
-uttalande kan det skrivas enligt följande:.
1let variable: string | null | undefined = null;
2if (variable === null || variable === undefined) {
3 variable = "Default Value";
4}
5console.log(variable); // Output: "Default Value"
Metod som använder ternär operator
Alternativt kan det skrivas med hjälp av den ternära operatorn enligt följande:.
1let variable: string | null | undefined = undefined;
2variable = variable != null ? variable : "Default Value";
3// != null checks for both null and undefined
4// (intentional loose equality comparison)
5
6console.log(variable); // Output: "Default Value"
En koncis metod som använder nullish coalescing-tilldelningsoperatorn
Å andra sidan, med hjälp av nullish coalescing-tilldelningsoperatorn, kan det skrivas så här:.
1let variable: string | null = null;
2variable ??= "Default Value";
3console.log(variable); // Output: "Default Value"
Som visas är nullish coalescing-tilldelningsoperatorn mycket enklare och mer läsbar jämfört med andra tilldelningsmetoder, vilket förbättrar kodens tydlighet.
Specifika exempel på användning av ??=
Den nullish sammanslående tilldelningsoperatören är användbar i olika scenarier, såsom initialisering av objektets egenskaper och inställning av standardvärden. Här är några specifika exempel.
Initialisering av objektets egenskaper
1interface Config {
2 theme?: string;
3 language?: string;
4}
5
6let config: Config = {};
7config.theme ??= "light"; // Set the default "light" theme if none is specified
8config.language ??= "en"; // Set the default "en" language if none is specified
9
10console.log(config); // Output: { theme: "light", language: "en" }
Initialisering av arrayer
1let numbers: number[] | null = null;
2numbers ??= []; // Assign an empty array if numbers is null
3
4numbers.push(1);
5console.log(numbers); // Output: [1]
Sätta standardvärden för funktionsargument
1function greet(name?: string) {
2 name ??= "Guest"; // Set name to "Guest" if it is undefined or null
3 console.log(`Hello, ${name}!`);
4}
5
6greet(); // Output: "Hello, Guest!"
7greet("Alice"); // Output: "Hello, Alice!"
Anteckningar och begränsningar
Den nullish sammanslående tilldelningsoperatören är mycket användbar, men det finns vissa begränsningar.
Endast null
och undefined
är målet..
1let str: string | null = "";
2str ??= "Default";
3console.log(str); // Output: "" (remains an empty string)
4
5let num: number | undefined = 0;
6num ??= 100;
7console.log(num); // Output: 0 (remains 0)
- Denna operator utför tilldelning endast när värdet är
null
ellerundefined
. Till exempel är värden som en tom sträng (""
),0
ellerfalse
inte målet.
Var försiktig när du använder den med andra operatorer..
1let value: string | null = null;
2
3// Targets not only "null" and "undefined" but also falsy values
4value ||= "Default";
5console.log(value); // Output: "Default"
6
7value = "";
8// An empty string is also targeted
9value ||= "Default";
10console.log(value); // Output: "Default"
11
12value = null;
13// Targets only null or undefined
14value ??= "Default";
15console.log(value); // Output: "Default"
- Nullish coalescing-tilldelningsoperatorn kan ge oavsiktliga resultat när den används med andra operatorer. Det är särskilt viktigt att förstå skillnaden mellan den och den logiska ELLER-tilldelningsoperatören.
Exempelkod
1let config: { theme?: string; language?: string } = {};
2
3// Use Nullish Coalescing Assignment to set default values
4config.theme ??= "light";
5config.language ??= "en";
6
7console.log(config); // Output: { theme: "light", language: "en" }
8
9let list: number[] | null = null;
10list ??= [];
11list.push(42);
12
13console.log(list); // Output: [42]
- Genom att använda den nullish sammanslående tilldelningsoperatören kan du eliminera onödig kod och skriva smidigare, mer elegant TypeScript-kod.
Sammanfattning
Nullish coalescing-tilldelningsoperatorn (??=
) är en av de enkla och effektiva tilldelningsoperationerna i TypeScript. Den är särskilt användbar när du behöver kontrollera null
eller undefined
samtidigt som du ställer in standardvärden. Jämfört med traditionella if
-uttalanden eller ternära operatorer blir koden mer koncis och läsbar.
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.