Põhjalik juhend JavaScripti nullish coalescing operaatori (??) kohta, mis uurib selle eeliseid loogilise VÕI (||) operaatori ees vaikimisi väärtuste määramisel ja falsy väärtuste käsitlemisel erinevates stsenaariumides.
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
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)
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)
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
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
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, !
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)
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
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
Vale kasutus (Põhjustab SyntaxError'i):
// const value = someValue ?? 10 && true; // SyntaxError: Unexpected token '&&'
// const result = null ?? 5 + 10; // SyntaxError: Unexpected number
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 (
nullvõiundefined) 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.