Nullish Coalescing v JavaScriptu: Celovit vodnik za dodeljevanje privzetih vrednosti

V JavaScriptu je dodeljevanje privzetih vrednosti pogosta naloga. Tradicionalno so razvijalci v ta namen uporabljali operator ALI (||). Vendar pa operator nullish coalescing (??), uveden v ECMAScript 2020, zagotavlja natančnejši in zanesljivejši način za obravnavo dodeljevanja privzetih vrednosti, zlasti pri delu z vrednostmi null ali undefined. Ta vodnik ponuja poglobljen vpogled v operator nullish coalescing, raziskuje njegovo sintakso, obnašanje, razlike od operatorja ALI in praktične primere uporabe.

Kaj je Nullish Coalescing?

Operator nullish coalescing (??) je logični operator, ki vrne svoj desni operand, kadar je njegov levi operand null ali undefined. V nasprotnem primeru vrne svoj levi operand. Preprosteje povedano, zagotovi privzeto vrednost samo takrat, ko je spremenljivka strogo null ali undefined.

Sintaksa

Sintaksa za operator nullish coalescing je preprosta:

leviOperand ?? desniOperand

Tukaj je leviOperand spremenljivka ali izraz, ki ga želite preveriti za null ali undefined, in desniOperand je privzeta vrednost, ki jo želite dodeliti, če je leviOperand res null ali undefined.

Primer

Oglejmo si naslednji primer:

const username = null ?? "Guest";
console.log(username); // Izhod: Guest

const age = undefined ?? 25;
console.log(age); // Izhod: 25

const city = "London" ?? "Unknown";
console.log(city); // Izhod: London

V tem primeru je username dodeljena privzeta vrednost "Guest", ker je na začetku null. Podobno je age dodeljena vrednost 25, ker se začne kot undefined. Vendar pa city ohrani svojo prvotno vrednost, "London", ker ni niti null niti undefined.

Vrednosti "Nullish" proti vrednostim "Falsy"

Ključno je razumeti razliko med vrednostmi nullish in falsy v JavaScriptu. Vrednost nullish je bodisi null bodisi undefined. Vrednost falsy je vrednost, ki se v logičnem kontekstu šteje za neresnično (false). Vrednosti falsy vključujejo:

null
undefined
0 (nič)
NaN (Not a Number)
'' (prazen niz)
false

Ključna razlika je v tem, da operator nullish coalescing preverja samo za null ali undefined, medtem ko operator ALI (||) preverja za katero koli vrednost falsy.

Razlika med `??` in `||`

Operator ALI (||) je logični operator ALI, ki vrne desni operand, če je levi operand falsy. Čeprav se lahko uporablja za dodeljevanje privzetih vrednosti, lahko povzroči nepričakovano obnašanje pri delu z vrednostmi, kot sta 0 ali prazen niz.

Primer: Pomanjkljivosti operatorja `||`

const quantity = 0 || 10; // Želimo privzeto vrednost 10, če količina manjka
console.log(quantity); // Izhod: 10 (Nepričakovano!), ker je 0 falsy

const text = '' || 'Default Text'; //Želimo privzeto besedilo, če besedilo manjka
console.log(text); // Izhod: Default Text (Nepričakovano!), ker je '' falsy

V prvem primeru smo želeli dodeliti privzeto količino 10 samo, če je quantity manjkala (null ali undefined). Vendar pa je operator ALI napačno dodelil privzeto vrednost, ker je 0 vrednost falsy. Podobno prazen niz povzroči, da se prikaže privzeto besedilo, tudi če niz obstaja (a je prazen).

Uporaba `??` za natančnost

Prepišimo prejšnji primer z uporabo operatorja nullish coalescing:

const quantity = 0 ?? 10;
console.log(quantity); // Izhod: 0 (Pravilno!)

const text = '' ?? 'Default Text';
console.log(text); // Izhod: '' (Pravilno!)

Zdaj je izhod pričakovan. Operator nullish coalescing preverja samo za null ali undefined, zato se 0 in '' obravnavata kot veljavni vrednosti in njuni prvotni vrednosti se ohranita.

Primeri uporabe operatorja Nullish Coalescing

Operator nullish coalescing je uporaben v različnih scenarijih, kjer morate zagotoviti privzete vrednosti samo takrat, ko je spremenljivka strogo null ali undefined. Tukaj je nekaj pogostih primerov uporabe:

1. Obravnavanje neobveznih parametrov funkcij

Pri definiranju funkcije z neobveznimi parametri lahko uporabite operator nullish coalescing za zagotavljanje privzetih vrednosti, če parametri niso podani.

function greet(name, greeting) {
  const userName = name ?? "User";
  const userGreeting = greeting ?? "Hello";
  console.log(`${userGreeting}, ${userName}!`);
}

greet(); // Izhod: Hello, User!
greet("Alice"); // Izhod: Hello, Alice!
greet("Bob", "Greetings"); // Izhod: Greetings, Bob!

2. Nastavljanje privzetih konfiguracijskih možnosti

Pri delu s konfiguracijskimi objekti lahko uporabite operator nullish coalescing, da zagotovite uporabo privzetih vrednosti, če določene konfiguracijske možnosti niso navedene.

const config = {
  timeout: 5000,
  retries: 3
};

function fetchData(options) {
  const timeout = options.timeout ?? 10000; // Privzeta časovna omejitev 10 sekund
  const retries = options.retries ?? 5; // Privzeto 5 poskusov
  console.log(`Timeout: ${timeout}, Retries: ${retries}`);
}

fetchData(config); // Izhod: Timeout: 5000, Retries: 3
fetchData({}); // Izhod: Timeout: 10000, Retries: 5
fetchData({timeout:null, retries: undefined}); // Izhod: Timeout: 10000, Retries: 5

3. Dostopanje do lastnosti ugnezdenih objektov

Pri dostopanju do lastnosti ugnezdenih objektov lahko operator nullish coalescing kombinirate z opcijskim veriženjem (?.), da zagotovite privzete vrednosti, če so katere od vmesnih lastnosti null ali undefined.

const user = {
  profile: {
    address: {
      city: "New York"
    }
  }
};

const cityName = user?.profile?.address?.city ?? "Unknown";
console.log(cityName); // Izhod: New York

const unknownUser = {};
const unknownCityName = unknownUser?.profile?.address?.city ?? "Unknown";
console.log(unknownCityName); // Izhod: Unknown

4. Delo z API-ji in zunanjimi podatki

Pri pridobivanju podatkov iz API-jev ali zunanjih virov lahko operator nullish coalescing uporabite za zagotavljanje privzetih vrednosti, če določena podatkovna polja manjkajo ali imajo vrednosti null ali undefined. Predstavljajte si pridobivanje podatkov o uporabnikih iz različnih regij. Predpostavimo, da nekatere regije morda ne vključujejo polja `country` v svojih uporabniških podatkih.

async function getUserData(userId) {
  try {
    const response = await fetch(`https://api.example.com/users/${userId}`);
    const data = await response.json();
    const country = data.country ?? "Unknown Country";
    const timezone = data.timezone ?? "UTC";
    console.log(`User is from: ${country}, Timezone: ${timezone}`);
  } catch (error) {
    console.error("Error fetching user data:", error);
  }
}

// Simulacija različnih odzivov API-ja:
const userWithCountry = { name: "John", country: "USA", timezone: "EST" };
const userWithoutCountry = { name: "Jane", timezone: "GMT" };

// Za testiranje bi potrebovali dejanski API ali mock fetch.
// Za demonstracijo simulirajmo odzive:
global.fetch = async (url) => {
    if (url.includes("123")) {
        return { json: async () => userWithCountry };
    } else if (url.includes("456")) {
        return { json: async () => userWithoutCountry };
    }
    throw new Error("Unexpected URL");
};

getUserData(123); // Izhod: User is from: USA, Timezone: EST
getUserData(456); // Izhod: User is from: Unknown Country, Timezone: GMT

Prednost operatorjev

Operator nullish coalescing ima relativno nizko prednost med operatorji. Nižja je od operatorjev ALI (||) in IN (&&). Zato je pri kombiniranju operatorja nullish coalescing z drugimi logičnimi operatorji nujno uporabiti oklepaje za eksplicitno določitev vrstnega reda operacij. Če tega ne storite, lahko pride do sintaktičnih napak ali nepričakovanega obnašanja.

Primer: Uporaba oklepajev za jasnost

// Brez oklepajev (SyntaxError)
// const result = false || null ?? "Default"; // SyntaxError: Unexpected token '??'

// Z oklepaji (Pravilno)
const result = false || (null ?? "Default");
console.log(result); // Izhod: Default

const anotherResult = (false || null) ?? "Default";
console.log(anotherResult); // Izhod: null

V prvem primeru pomanjkanje oklepajev povzroči SyntaxError, ker JavaScript mehanizem ne more določiti nameravanega vrstnega reda operacij. Z dodajanjem oklepajev eksplicitno povemo mehanizmu, naj najprej ovrednoti operator nullish coalescing. Drugi primer je veljaven; vendar je izhod drugačen, ker se najprej ovrednoti izraz z ||.

Združljivost z brskalniki

Operator nullish coalescing (??) je relativno nova funkcionalnost, zato je ključno upoštevati združljivost z brskalniki, zlasti če ciljate na starejše brskalnike. Večina sodobnih brskalnikov podpira operator nullish coalescing, vključno z:

Chrome 80+
Firefox 72+
Safari 13.1+
Edge 80+
Node.js 14+

Če morate podpirati starejše brskalnike, lahko uporabite transpilator, kot je Babel, da pretvorite svojo kodo v združljivo različico JavaScripta. Babel bo preoblikoval operator ?? v enakovredno kodo JavaScript, ki deluje v starejših okoljih.

Najboljše prakse

Tukaj je nekaj najboljših praks za učinkovito uporabo operatorja nullish coalescing:

Uporabite ?? za preverjanje vrednosti nullish: Uporabite operator nullish coalescing (??), kadar želite posebej zagotoviti privzeto vrednost samo takrat, ko je spremenljivka null ali undefined.
Uporabite oklepaje za kompleksne izraze: Pri kombiniranju operatorja nullish coalescing z drugimi logičnimi operatorji uporabite oklepaje za jasno določitev vrstnega reda operacij.
Upoštevajte združljivost z brskalniki: Preverite združljivost z brskalniki in po potrebi uporabite transpilator za podporo starejšim brskalnikom.
Uporabljajte dosledno: Sprejmite uporabo ??, kjer je to primerno, za bolj predvidljiv slog kodiranja v celotnem projektu.
Kombinirajte z opcijskim veriženjem: Uporabite ?? v povezavi z opcijskim veriženjem ?. za varen dostop in dodeljevanje privzetih vrednosti ugnezdenim lastnostim objektov.

Globalni vidiki

Pri razvoju za globalno občinstvo upoštevajte naslednje točke v zvezi z dodeljevanjem privzetih vrednosti:

Lokalizacija: Privzete vrednosti bo morda treba lokalizirati glede na jezik ali regijo uporabnika. Na primer, privzeti simbol valute ali format datuma.
Kulturne norme: Določene privzete vrednosti bo morda treba prilagoditi glede na kulturne norme. Na primer, privzeto pozdravno sporočilo se lahko razlikuje v različnih kulturah.
Dostopnost: Zagotovite, da so privzete vrednosti dostopne in razumljive uporabnikom s posebnimi potrebami. Zagotovite jasne in opisne oznake za privzete vrednosti v uporabniških vmesnikih.
Časovni pasovi in datumi: Pri delu z datumi in časi uporabite ustrezne časovne pasove in formate datumov, da zagotovite pravilno prikazovanje privzetih vrednosti uporabnikom v različnih regijah.

Primer: Lokalizacija z operatorjem Nullish Coalescing

Recimo, da želite prikazati privzeto pozdravno sporočilo v različnih jezikih glede na lokalne nastavitve uporabnika. Z operatorjem nullish coalescing lahko zagotovite privzeto sporočilo, če lokalizirano sporočilo ni na voljo.

function getWelcomeMessage(locale) {
  const localizedMessages = {
    en: "Welcome!",
    fr: "Bienvenue !",
    de: "Willkommen!"
  };

  const message = localizedMessages[locale] ?? "Welcome!"; // Privzeto na angleščino, če lokalizacija ni najdena
  return message;
}

console.log(getWelcomeMessage("fr")); // Izhod: Bienvenue !
console.log(getWelcomeMessage("es")); // Izhod: Welcome! (Privzeto na angleščino)

Zaključek

Operator nullish coalescing (??) je dragocen dodatek jeziku JavaScript. Omogoča natančnejši in zanesljivejši način dodeljevanja privzetih vrednosti v primerjavi z operatorjem ALI (||), zlasti pri delu z vrednostmi, kot sta 0 ali prazni nizi. Z razumevanjem njegove sintakse, obnašanja in primerov uporabe lahko pišete čistejšo in bolj vzdržljivo kodo, ki natančno obravnava dodeljevanje privzetih vrednosti. Ne pozabite upoštevati združljivosti z brskalniki, prednosti operatorjev in globalnih vidikov pri uporabi operatorja nullish coalescing v svojih projektih.

Z upoštevanjem najboljših praks, opisanih v tem vodniku, lahko učinkovito izkoristite operator nullish coalescing za izboljšanje kakovosti in zanesljivosti vaše JavaScript kode, s čimer postane bolj robustna in lažje razumljiva. Vedno dajte prednost jasnosti in vzdržljivosti vaše kode, in operator nullish coalescing je lahko močno orodje pri doseganju teh ciljev.