JavaScript Nullish Coalescing: Vaikimisi väärtuse määramine vs. Falsy väärtuste käsitlemine

JavaScripti arendajatel on tihti vaja muutujatele määrata vaikeväärtusi, kui algne väärtus on puudu või kehtetu. Traditsiooniliselt kasutati selleks loogilist VÕI operaatorit (||). Siiski pakub nullish coalescing operaator (??), mis võeti kasutusele ECMAScript 2020-s, täpsema ja usaldusväärsema lahenduse, eriti kui tegemist on falsy väärtustega. See põhjalik juhend uurib nullish coalescing'u nüansse, võrreldes seda loogilise VÕI operaatoriga ja tutvustades selle rakendusi erinevates stsenaariumides.

Nullish Coalescing (??) mõistmine

Nullish coalescing operaator (??) tagastab oma parempoolse operandi, kui selle vasakpoolne operand on null või undefined. Vastasel juhul tagastab see oma vasakpoolse operandi. Lihtsamalt öeldes pakub see vaikeväärtuse ainult siis, kui muutuja on selgesõnaliselt null või undefined.

Süntaks:

leftOperand ?? rightOperand

Näide:

            const name = null ?? "Guest";
console.log(name); // Väljund: "Guest"

const age = undefined ?? 25;
console.log(age); // Väljund: 25

const score = 0 ?? 100;
console.log(score); // Väljund: 0

            

              
                Copy
              
            
          

Nullish Coalescing (??) ja loogilise VÕI (||) eristamine

Ka loogiline VÕI operaator (||) pakub võimalust vaikeväärtuste määramiseks. Siiski käsitleb see igat falsy väärtust (false, 0, '', NaN, null, undefined) samaväärsena null'i või undefined'iga, mis võib viia ootamatu käitumiseni.

Loogilise VÕI näide:

            const quantity = 0 || 10;
console.log(quantity); // Väljund: 10 (ootamatu, kuna 0 on falsy)

const message = '' || "No message";
console.log(message); // Väljund: "No message" (ootamatu, kuna '' on falsy)

            

              
                Copy
              
            
          

Nullish Coalescing näide:

            const quantity = 0 ?? 10;
console.log(quantity); // Väljund: 0 (õige, kuna 0 ei ole null ega undefined)

const message = '' ?? "No message";
console.log(message); // Väljund: "" (õige, kuna '' ei ole null ega undefined)

            

              
                Copy
              
            
          

Nagu näha, käivitub nullish coalescing operaator ainult siis, kui vasakpoolne operand on selgesõnaliselt null või undefined, säilitades seeläbi falsy väärtused nagu 0 ja ''.

Nullish Coalescing'u kasutusjuhud

Nullish coalescing on eriti kasulik stsenaariumides, kus on vaja eristada puuduvat väärtust (null või undefined) ja kehtivat falsy väärtust.

1. Konfiguratsioonivalikute käsitlemine

Konfiguratsioonivalikutega tegeledes võite soovida anda vaikeväärtused seadetele, mida pole selgesõnaliselt määratletud. Operaatori ?? kasutamine tagab, et kehtivaid falsy väärtusi (nt 0 ajalõpu väärtuse jaoks) ei asendata kogemata vaikeväärtusega.

            const config = {
  timeout: 0,
  maxRetries: null,
  apiEndpoint: undefined
};

const timeout = config.timeout ?? 5000; // Kasuta 0, kui ajalõpp on selgesõnaliselt määratud, vastasel juhul vaikeväärtus 5000
const maxRetries = config.maxRetries ?? 3; // Kasuta 3, kui maxRetries on null või undefined
const apiEndpoint = config.apiEndpoint ?? "https://example.com/api"; // Kasuta vaike-lõpp-punkti, kui apiEndpoint on null või undefined

console.log(`Timeout: ${timeout}, Max Retries: ${maxRetries}, API Endpoint: ${apiEndpoint}`);
// Väljund: Timeout: 0, Max Retries: 3, API Endpoint: https://example.com/api

            

              
                Copy
              
            
          

2. API vastustega töötamine

API vastused sisaldavad sageli välju, mis võivad olla puudu või millel on selgesõnaliselt määratud falsy väärtused. Nullish coalescing võimaldab teil neid stsenaariume sujuvalt käsitleda, tagades, et annate vaikeväärtusi ainult siis, kui väli on tõepoolest puudu.

Näide: lihtsustatud API vastus, mis esindab kasutajat:

            const user = {
  name: "Alice",
  age: 30,
  countryCode: null,
  acceptedTerms: false,
  profilePictureURL: undefined
};

const displayName = user.name ?? "Tundmatu kasutaja";
const userAge = user.age ?? "Vanus pole saadaval";
const country = user.countryCode ?? "US"; //Vaikeväärtus US, kui on null/undefined
const hasAcceptedTerms = user.acceptedTerms ?? true; //Vaikeväärtus true, kui on null/undefined
const profilePic = user.profilePictureURL ?? "/default-profile.png"; //Vaike-pilt, kui on null/undefined

console.log(`Name: ${displayName}`); // Väljund: Name: Alice
console.log(`Age: ${userAge}`); // Väljund: Age: 30
console.log(`Country: ${country}`); // Väljund: Country: US
console.log(`Accepted Terms: ${hasAcceptedTerms}`); // Väljund: Accepted Terms: false
console.log(`Profile Picture: ${profilePic}`); //Väljund: Profile Picture: /default-profile.png

            

              
                Copy
              
            
          

Selles näites kasutame vaikeväärtust "US" ainult siis, kui `countryCode` on selgesõnaliselt `null` või `undefined`. Kui API tagastaks `countryCode: ""`, siis säilitataks tühi string, peegeldades kasutaja tegelikku (kuigi potentsiaalselt puuduvat) riigikoodi.

3. Tagavaraväärtuste pakkumine funktsioonides

Funktsioonide kirjutamisel, mis aktsepteerivad valikulisi parameetreid, saab nullish coalescing'ut kasutada puuduvatele argumentidele vaikeväärtuste andmiseks.

            function greet(name, greeting) {
  const displayName = name ?? "Guest";
  const salutation = greeting ?? "Hello";
  return `${salutation}, ${displayName}!`;
}

console.log(greet("Bob", "Good morning")); // Väljund: Good morning, Bob!
console.log(greet(null, undefined)); // Väljund: Hello, Guest!
console.log(greet("", "")); // Väljund: , !
console.log(greet("", null)); // Väljund: Hello, !

            

              
                Copy
              
            
          

See lähenemine tagab, et funktsioonil on alati väärtus, millega töötada, isegi kui kutsuja ei paku kõiki argumente.

4. Rahvusvahelistamine ja lokaliseerimine (i18n/l10n)

Rahvusvahelistatud rakendustega töötades on teil sageli erinevatele stringidele erinevad tõlked. Nullish coalescing'ut saab kasutada vaiketõlke pakkumiseks, kui konkreetse keele jaoks on spetsiifiline tõlge puudu.

            const translations = {
  en: {
    greeting: "Hello",
    farewell: "Goodbye"
  },
  fr: {
    greeting: "Bonjour"
  }
};

function translate(key, language) {
  return translations[language]?.[key] ?? translations.en[key] ?? `Tõlge puudub võtmele: ${key}`;
}

console.log(translate("greeting", "fr")); // Väljund: Bonjour
console.log(translate("farewell", "fr")); // Väljund: Tõlge puudub võtmele: farewell
console.log(translate("greeting", "de")); // Väljund: Hello (kasutab inglisekeelset tagavara)

            

              
                Copy
              
            
          

Selles näites proovime esmalt leida tõlke määratud keele ja võtme jaoks. Kui see on puudu, kasutame inglisekeelset tõlget. Kui isegi inglisekeelne tõlge on puudu, tagastame teate, mis näitab, et tõlge puudub.

5. Kasutaja sisendi käsitlemine vormides

Vormidest kasutaja sisendi töötlemisel võite kohata juhtumeid, kus teatud väljad on jäetud tühjaks või sisaldavad tühje stringe. Nullish coalescing operaatori kasutamine koos valikulise aheldamise operaatoriga (?.) võib olla väga efektiivne sügavalt pesastatud kasutaja sisendiga tegelemisel.

            const formData = {
  user: {
    name: "",
    address: {
      city: null,
      country: undefined
    }
  }
};

const userName = formData.user.name || "Nime pole antud";
const safeUserName = formData?.user?.name ?? "Nime pole antud";
const userCity = formData?.user?.address?.city ?? "Linn teadmata";
const userCountry = formData?.user?.address?.country ?? "Riik teadmata";

console.log(userName); // Nime pole antud (kuna tühi string on falsy)
console.log(safeUserName); // "" (kuna safeUserName kontrollib selgesõnaliselt null'i või undefined'i)
console.log(userCity); // Linn teadmata
console.log(userCountry); // Riik teadmata

            

              
                Copy
              
            
          

Operaatorite järjekord ja kombineerimine teiste operaatoritega

Nullish coalescing operaatoril on suhteliselt madal operaatorite järjekord. See tähendab, et tihti peate kasutama sulgusid, et tagada selle korrektne hindamine, eriti kui seda kombineerida teiste operaatoritega nagu loogiline NING (&&) või loogiline VÕI (||).

Oluline märkus: Te ei saa otse kombineerida operaatorit ?? operaatoritega && või || ilma sulgusid kasutamata. See on vajalik operatsioonide järjekorra mitmetähenduslikkuse vältimiseks.

Õige kasutus:

            const value = (someValue ?? 10) && true;
console.log(value); //Väljund: true, kui someValue ei ole null ega undefined, vastasel juhul false

const result = (null ?? 5) + 10; // Väljund: 15

            

              
                Copy
              
            
          

Vale kasutus (Põhjustab SyntaxError'i):

            // const value = someValue ?? 10 && true; // SyntaxError: Unexpected token '&&'

// const result = null ?? 5 + 10; // SyntaxError: Unexpected number

            

              
                Copy
              
            
          

Veebilehitsejate ühilduvus

Nullish coalescing operaator (??) on suhteliselt hiljutine lisandus JavaScriptile. Veenduge, et teie sihtbrauserid seda toetaksid. Enamik kaasaegseid brausereid toetab seda, kuid vanemad brauserid võivad nõuda transpileerimist tööriistadega nagu Babel.

Brauserite ühilduvuse kontrollimiseks võite vaadata ressursse nagu MDN Web Docs.

Parimad praktikad Nullish Coalescing'u kasutamiseks

• Kasutage seda siis, kui peate eristama puuduvaid väärtusi (null või undefined) ja kehtivaid falsy väärtusi.
• Kasutage alati sulgusid, kui kombineerite ?? operaatoritega && või ||, et vältida süntaksivigu ja tagada korrektne hindamine.
• Olge teadlik brauserite ühilduvusest ja kaaluge vajadusel transpileerimist.
• Dokumenteerige ?? kasutamine selgelt koodi loetavuse parandamiseks.
• Testige oma koodi põhjalikult, et tagada vaikeväärtuste korrektne määramine kõigis stsenaariumides.

Kokkuvõte

Nullish coalescing operaator (??) on võimas ja väärtuslik lisandus JavaScripti keelele. See pakub täpsemat ja usaldusväärsemat viisi vaikeväärtuste määramiseks võrreldes traditsioonilise loogilise VÕI operaatoriga (||), eriti falsy väärtustega tegelemisel. Mõistes selle nüansse ja parimaid praktikaid, saate kirjutada puhtamat, vastupidavamat ja paremini hooldatavat JavaScripti koodi. Kaaluge ?? kasutuselevõttu oma projektides, et parandada vaikeväärtuste määramise selgust ja täpsust. Ärge unustage oma koodi põhjalikult testida erinevates brauserites ja kaaluda transpileerimist vanemate keskkondade jaoks.

See juhend andis põhjaliku ülevaate. Katsetage operaatoriga ?? erinevates kontekstides, et täielikult mõista selle võimekust ja piiranguid, ning täiustage oma arusaamist pidevalt praktilise rakenduse kaudu.