JavaScripti null-liitmise operaator: Vaikimisi väärtuste määramise valdamine

JavaScripti arendajad peavad sageli määrama vaikeväärtusi, kui muutuja on null või undefined. Enne ES2020 standardit oli selle saavutamiseks peamine meetod loogiline VÕI operaator (||). Kuid null-liitmise operaatori (??) kasutuselevõtt pakub täpsemat ja usaldusväärsemat lahendust. See põhjalik juhend uurib null-liitmise operaatori nüansse, selle eeliseid ja praktilisi näiteid, et aidata teil seda võimsat funktsiooni vallata.

Null-liitmise operaatori (??) mõistmine

Null-liitmise operaator (??) on loogiline operaator, mis tagastab oma parempoolse operandi, kui selle vasakpoolne operand on null või undefined. Muul juhul tagastab see oma vasakpoolse operandi.

Süntaks:

            leftOperand ?? rightOperand
            

              
                Copy
              
            
          

Põhiline erinevus loogilisest VÕI-st (||):

Loogiline VÕI operaator (||) tagastab parempoolse operandi, kui vasakpoolne operand on mis tahes väär väärtus (null, undefined, 0, '', NaN, false). See võib põhjustada ootamatut käitumist, kui kavatsete käsitleda ainult null või undefined väärtusi.

Miks kasutada null-liitmise operaatorit?

Null-liitmise operaator pakub traditsioonilise loogilise VÕI operaatori ees mitmeid eeliseid:

• Täpsus: See on suunatud spetsiifiliselt null ja undefined väärtustele, vältides tahtmatuid vaikeväärtuste määramisi teiste väärade väärtuste puhul.
• Loetavus: See annab selgelt edasi kavatsuse käsitleda ainult null või undefined juhtumeid, parandades koodi hooldatavust.
• Ohutus: See hoiab ära ootamatu käitumise, mille põhjustavad väärad väärtused, mis tahtmatult käivitavad vaikeväärtuste määramise.

Praktilised näited

1. Vaikimisi väärtuse põhiline määramine

Vaikeväärtuse määramine muutujale, kui see on null või undefined:

            const userName = user.name ?? 'Guest';
console.log(userName); // Väljund: 'Guest', kui user.name on null või undefined, muul juhul tegelik kasutajanimi
            

              
                Copy
              
            
          

2. API vastuste käsitlemine

Andmete pärimine API-st ja vaikeväärtuse pakkumine, kui vastusest puudub konkreetne omadus:

            const apiResponse = {
  data: {
    city: null,
  },
};

const cityName = apiResponse.data.city ?? 'Unknown City';
console.log(cityName); // Väljund: 'Unknown City'
            

              
                Copy
              
            
          

3. Vaikimisi konfiguratsioonid

Komponendi või mooduli vaikimisi konfiguratsioonivalikute seadistamine:

            const config = {
  theme: userSettings.theme,
  animationSpeed: userSettings.animationSpeed ?? 'normal',
};

console.log(config.animationSpeed); // Väljund: 'normal', kui userSettings.animationSpeed on null või undefined
            

              
                Copy
              
            
          

4. Kasutajaeelistuste käsitlemine

Kasutajatel seadete kohandamise lubamine ja vaikeväärtuste pakkumine, kui nad pole eelistust määranud:

            let userVolume = localStorage.getItem('volume'); //võib tagastada null
let volume = userVolume ?? 0.5; // määra vaikimisi helitugevuseks 0.5

console.log(`Kasutaja helitugevus on ${volume}`);
            

              
                Copy
              
            
          

5. Null-liitmise aheldamine

Saate null-liitmise operaatorit aheldada, et pakkuda vaikeväärtuste kaskaadi:

            const setting = userSetting.displaySetting.theme ?? defaultSettings.theme ?? 'light';
console.log(setting); // Väljund: Esimene mitte-null/undefined väärtus ahelast
            

              
                Copy
              
            
          

6. Töötamine funktsioonidega

Vaikefunktsiooni määramine, kui antud funktsioon on null või undefined:

            const logMessage = logger.log ?? (() => console.log('Logijat pole saadaval.'));
logMessage('See on test-sõnum.');
            

              
                Copy
              
            
          

Null-liitmine koos Optional Chaining'uga

Null-liitmise operaator sobib suurepäraselt kokku optional chaining'uga (?.), mis võimaldab teil turvaliselt ligi pääseda pesastatud omadustele, põhjustamata vigu, kui vahepealne omadus on null või undefined.

Näide:

            const user = {
  profile: {
    address: {
      city: null,
    },
  },
};

const cityName = user?.profile?.address?.city ?? 'Unknown City';
console.log(cityName); // Väljund: 'Unknown City'
            

              
                Copy
              
            
          

Selles näites, kui mõni omadustest (user, profile, address või city) on null või undefined, katkestab optional chaining ahela ja null-liitmise operaator tagastab vaikeväärtuse 'Unknown City'.

Levinud kasutusjuhud globaalsetes rakendustes

Mõelge nendele rahvusvahelistele stsenaariumidele, kus null-liitmise operaator võib olla eriti kasulik:

• Lokaliseerimine: Vaiketõlgete pakkumine kasutaja lokaadi alusel. Kui tõlge pole konkreetse keele jaoks saadaval, saab rakendada tagavaralahendusena vaikekeelt (nt inglise keelt).
• Valuuta vormindamine: Valuutaväärtuste kuvamine sobivas vormingus vastavalt kasutaja piirkonnale. Kui piirkondlikud seaded pole saadaval, saab rakendada vaikimisi valuutavormingut.
• Kuupäeva ja kellaaja vormindamine: Kuupäevade ja kellaaegade vormindamine vastavalt kasutaja lokaadile. Kui lokaadi teave puudub, saab kasutada vaikimisi kuupäeva ja kellaaja vormingut.
• Aadressi vormindamine: Aadressiteabe kuvamine erinevate riikide jaoks õiges vormingus. Kui riik pole määratud, saab kasutada vaikimisi aadressivormingut.

Näide: Lokaliseerimise tagavaralahendus

            const translatedText = localizedStrings[userLocale]?.greeting ?? localizedStrings['en-US'].greeting ?? "Hello!";
console.log(translatedText);
            

              
                Copy
              
            
          

Parimad tavad

• Kasutage ?? null/undefined kontrollimiseks: Eelistage ?? operaatorit || asemel, kui soovite spetsiifiliselt käsitleda null või undefined väärtusi.
• Kombineerige optional chaining'uga: Kasutage ?? koos optional chaining'uga (?.), et turvaliselt ligi pääseda pesastatud omadustele.
• Vältige tarbetut keerukust: Hoidke oma kood puhas ja loetav, kasutades ?? ainult siis, kui see pakub selget eelist.
• Arvestage brauseri ühilduvusega: Veenduge, et teie sihtbrauserid toetavad null-liitmise operaatorit (ES2020). Kui peate toetama vanemaid brausereid, kasutage transpilerit nagu Babel.
• Koodi ülevaatused: Julgustage koodi ülevaatusi, et tagada null-liitmise operaatori õige kasutamine, eriti suurtes rahvusvahelistes projektides, kus väärade väärtuste valesti tõlgendamine võib omada olulisi tagajärgi.

Brauseri ühilduvus

Null-liitmise operaator on JavaScriptis suhteliselt uus funktsioon (ES2020). Veenduge, et teie sihtbrauserid seda toetavad, või kasutage transpilerit nagu Babel, et tagada ühilduvus vanemate brauseritega. Arvestage oma rakenduse kasutajate demograafiaga. Näiteks projekt, mis on suunatud kasutajatele riikides, kus tehnoloogia areng on aeglasem, võib vajada transpileerimist rohkem kui see, mis on suunatud tehnoloogiliselt arenenud piirkondade kasutajatele.

Välditavad lõksud

• ?? ja || segamine &&-ga: Kui kombineerida null-liitmise operaatorit (??) või loogilist VÕI operaatorit (||) loogilise JA operaatoriga (&&) ilma selgete sulgudeta, viskab JavaScript süntaksivea. Kasutage alati sulgusid tehete järjekorra selgitamiseks.
• ?? ja || segamini ajamine: Pidage meeles olulist erinevust: ?? kontrollib ainult null ja undefined väärtusi, samas kui || kontrollib mis tahes väära väärtust.

Lõksu 1 näide (süntaksiviga):

            // See viskab süntaksivea (SyntaxError):
// const value = a ?? b && c;

// Õige viis (kasutades sulgusid):
const value = a ?? (b && c);
const value2 = (a ?? b) && c;
            

              
                Copy
              
            
          

Alternatiivid null-liitmise operaatorile (vanematele brauseritele)

Kui peate toetama vanemaid brausereid, mis ei toeta null-liitmise operaatorit, võite kasutada järgmisi alternatiive:

• Loogiline VÕI operaator (||): Nagu varem mainitud, on see traditsiooniline lähenemine. Siiski olge teadlik väärade väärtuste probleemist.
• Kolmikoperaator (ternary operator): Pikem, kuid selgem viis kontrollida null või undefined väärtusi.

Näide: Kolmikoperaator

            const value = a === null || a === undefined ? defaultValue : a;
            

              
                Copy
              
            
          

Kokkuvõte

Null-liitmise operaator (??) on väärtuslik lisand JavaScripti keelde, pakkudes täpsemat ja loetavamat viisi vaikeväärtuste määramiseks, kui tegemist on null või undefined väärtustega. Mõistes selle eeliseid ja nüansse, saate kirjutada puhtamat, ohutumat ja paremini hooldatavat koodi. Selle kombineerimine optional chaining'uga parandab veelgi teie võimet keerulisi andmestruktuure sujuvalt käsitleda. Globaalsele publikule rakendusi ehitades arvestage null ja undefined väärtuste mõjudega erinevates kultuurilistes ja piirkondlikes kontekstides ning kasutage null-liitmise operaatorit, et pakkuda kõigile ühtlast ja kasutajasõbralikku kogemust.