JavaScript Nullish Coalescing: Visaptverošs ceļvedis noklusējuma vērtību piešķiršanai

JavaScript valodā noklusējuma vērtību piešķiršana ir izplatīts uzdevums. Tradicionāli izstrādātāji šim nolūkam ir izmantojuši OR operatoru (||). Tomēr nullish coalescing operators (??), kas ieviests ECMAScript 2020, nodrošina precīzāku un uzticamāku veidu, kā rīkoties ar noklusējuma vērtību piešķiršanu, īpaši strādājot ar null vai undefined vērtībām. Šis ceļvedis sniedz padziļinātu ieskatu nullish coalescing operatorā, izpētot tā sintaksi, uzvedību, atšķirības no OR operatora un praktiskus lietošanas gadījumus.

Kas ir Nullish Coalescing?

Nullish coalescing operators (??) ir loģiskais operators, kas atgriež savu labās puses operandu, ja tā kreisās puses operands ir null vai undefined. Pretējā gadījumā tas atgriež kreisās puses operandu. Vienkāršāk sakot, tas nodrošina noklusējuma vērtību tikai tad, ja mainīgais ir tieši null vai undefined.

Sintakse

Nullish coalescing operatora sintakse ir vienkārša:

leftOperand ?? rightOperand

Šeit leftOperand ir mainīgais vai izteiksme, kuru vēlaties pārbaudīt uz null vai undefined, un rightOperand ir noklusējuma vērtība, kuru vēlaties piešķirt, ja leftOperand patiešām ir null vai undefined.

Piemērs

Apsveriet šādu piemēru:

const username = null ?? "Guest";
console.log(username); // Rezultāts: Guest

const age = undefined ?? 25;
console.log(age); // Rezultāts: 25

const city = "London" ?? "Unknown";
console.log(city); // Rezultāts: London

Šajā piemērā username tiek piešķirta noklusējuma vērtība "Guest", jo sākotnēji tas ir null. Līdzīgi, age tiek piešķirta vērtība 25, jo tas sākas kā undefined. Tomēr city saglabā savu sākotnējo vērtību, "London", jo tas nav ne null, ne undefined.

Nullish pret Falsy vērtībām

Ir svarīgi saprast atšķirību starp nullish un falsy vērtībām JavaScript valodā. Nullish vērtība ir vai nu null, vai undefined. Falsy vērtība ir vērtība, kas tiek uzskatīta par aplamu (false), kad tā tiek sastapta Būla kontekstā. Falsy vērtības ietver:

null
undefined
0 (nulle)
NaN (Not a Number)
'' (tukša virkne)
false

Galvenā atšķirība ir tā, ka nullish coalescing operators pārbauda tikai null vai undefined, savukārt OR operators (||) pārbauda jebkuru falsy vērtību.

Atšķirība starp `??` un `||`

OR operators (||) ir loģiskais OR operators, kas atgriež labās puses operandu, ja kreisās puses operands ir falsy. Lai gan to var izmantot noklusējuma vērtību piešķiršanai, tas var radīt negaidītu uzvedību, strādājot ar tādām vērtībām kā 0 vai tukša virkne.

Piemērs: `||` lamatas

const quantity = 0 || 10; // Mēs plānojam noklusējumu 10, ja daudzums trūkst
console.log(quantity); // Rezultāts: 10 (Negaidīti!), jo 0 ir falsy

const text = '' || 'Default Text'; // Mēs plānojam noklusējuma tekstu, ja teksts trūkst
console.log(text); // Rezultāts: Default Text (Negaidīti!), jo '' ir falsy

Pirmajā piemērā mēs plānojām piešķirt noklusējuma daudzumu 10 tikai tad, ja quantity trūka (bija null vai undefined). Tomēr, tā kā 0 ir falsy vērtība, OR operators nepareizi piešķīra noklusējuma vērtību. Līdzīgi, tukšā virkne izraisa noklusējuma teksta parādīšanos, pat ja virkne pastāv (bet ir tukša).

Izmantojot `??` precizitātei

Pārrakstīsim iepriekšējo piemēru, izmantojot nullish coalescing operatoru:

const quantity = 0 ?? 10;
console.log(quantity); // Rezultāts: 0 (Pareizi!)

const text = '' ?? 'Default Text';
console.log(text); // Rezultāts: '' (Pareizi!)

Tagad rezultāts ir tāds, kā gaidīts. Nullish coalescing operators pārbauda tikai null vai undefined, tādēļ 0 un '' tiek uzskatītas par derīgām vērtībām, un to sākotnējās vērtības tiek saglabātas.

Nullish Coalescing pielietojuma gadījumi

Nullish coalescing operators ir noderīgs dažādos scenārijos, kur nepieciešams nodrošināt noklusējuma vērtības tikai tad, ja mainīgais ir tieši null vai undefined. Šeit ir daži izplatīti pielietojuma gadījumi:

1. Papildu funkciju parametru apstrāde

Definējot funkciju ar papildu parametriem, varat izmantot nullish coalescing operatoru, lai nodrošinātu noklusējuma vērtības, ja parametri nav norādīti.

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

greet(); // Rezultāts: Hello, User!
greet("Alice"); // Rezultāts: Hello, Alice!
greet("Bob", "Greetings"); // Rezultāts: Greetings, Bob!

2. Noklusējuma konfigurācijas opciju iestatīšana

Strādājot ar konfigurācijas objektiem, varat izmantot nullish coalescing operatoru, lai nodrošinātu, ka tiek izmantotas noklusējuma vērtības, ja noteiktas konfigurācijas opcijas nav norādītas.

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

function fetchData(options) {
  const timeout = options.timeout ?? 10000; // Noklusējuma taimauts 10 sekundes
  const retries = options.retries ?? 5; // Noklusējuma 5 mēģinājumi
  console.log(`Timeout: ${timeout}, Retries: ${retries}`);
}

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

3. Piekļuve ligzdotiem objekta īpašumiem

Piekļūstot ligzdotu objektu īpašībām, nullish coalescing operatoru var apvienot ar optional chaining (?.), lai nodrošinātu noklusējuma vērtības, ja kāds no starpposma īpašumiem ir null vai undefined.

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

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

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

4. Darbs ar API un ārējiem datiem

Iegūstot datus no API vai ārējiem avotiem, nullish coalescing operatoru var izmantot, lai nodrošinātu noklusējuma vērtības, ja noteikti datu lauki trūkst vai tiem ir null vai undefined vērtības. Apsveriet lietotāja datu iegūšanu no dažādiem reģioniem. Pieņemsim, ka daži reģioni var neiekļaut `country` lauku savos lietotāja datos.

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);
  }
}

// Simulējot dažādas API atbildes:
const userWithCountry = { name: "John", country: "USA", timezone: "EST" };
const userWithoutCountry = { name: "Jane", timezone: "GMT" };

// Lai to pārbaudītu, jums būtu nepieciešams reāls API vai mock fetch.
// Demonstrācijas nolūkos simulēsim atbildes:
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); // Rezultāts: User is from: USA, Timezone: EST
getUserData(456); // Rezultāts: User is from: Unknown Country, Timezone: GMT

Operatoru prioritāte

Nullish coalescing operatoram ir salīdzinoši zema operatoru prioritāte. Tā ir zemāka nekā OR (||) un AND (&&) operatoriem. Tāpēc, apvienojot nullish coalescing operatoru ar citiem loģiskajiem operatoriem, ir svarīgi izmantot iekavas, lai skaidri definētu darbību secību. Ja to nedara, var rasties sintakses kļūdas vai negaidīta uzvedība.

Piemērs: Iekavu izmantošana skaidrībai

// Bez iekavām (SyntaxError)
// const result = false || null ?? "Default"; // SyntaxError: Unexpected token '??'

// Ar iekavām (Pareizi)
const result = false || (null ?? "Default");
console.log(result); // Rezultāts: Default

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

Pirmajā piemērā iekavu trūkums rada SyntaxError, jo JavaScript dzinējs nevar noteikt paredzēto darbību secību. Pievienojot iekavas, mēs skaidri norādām dzinējam vispirms izvērtēt nullish coalescing operatoru. Otrais piemērs ir derīgs; tomēr rezultāts ir atšķirīgs, jo vispirms tiek izvērtēta || izteiksme.

Pārlūkprogrammu saderība

Nullish coalescing operators (??) ir salīdzinoši jauna funkcija, tāpēc ir svarīgi ņemt vērā pārlūkprogrammu saderību, īpaši, ja jūsu mērķauditorija izmanto vecākas pārlūkprogrammas. Lielākā daļa moderno pārlūkprogrammu atbalsta nullish coalescing operatoru, tostarp:

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

Ja jums nepieciešams atbalstīt vecākas pārlūkprogrammas, varat izmantot transpileru, piemēram, Babel, lai pārveidotu savu kodu uz saderīgu JavaScript versiju. Babel pārveidos ?? operatoru par ekvivalentu JavaScript kodu, kas darbojas vecākās vidēs.

Labākās prakses

Šeit ir dažas labākās prakses, kā efektīvi izmantot nullish coalescing operatoru:

Izmantojiet ?? nullish pārbaudēm: Izmantojiet nullish coalescing operatoru (??), ja vēlaties nodrošināt noklusējuma vērtību tikai tad, ja mainīgais ir null vai undefined.
Izmantojiet iekavas sarežģītām izteiksmēm: Apvienojot nullish coalescing operatoru ar citiem loģiskajiem operatoriem, izmantojiet iekavas, lai skaidri definētu darbību secību.
Apsveriet pārlūkprogrammu saderību: Pārbaudiet pārlūkprogrammu saderību un, ja nepieciešams, izmantojiet transpileru, lai atbalstītu vecākas pārlūkprogrammas.
Izmantojiet konsekventi: Pieņemiet ?? izmantošanu attiecīgajās vietās, lai visā projektā būtu paredzamāks kodēšanas stils.
Apvienojiet ar optional chaining: Izmantojiet ?? kopā ar optional chaining ?., lai droši piekļūtu un piešķirtu noklusējuma vērtības ligzdotiem objektu īpašumiem.

Globāli apsvērumi

Izstrādājot globālai auditorijai, ņemiet vērā šādus punktus saistībā ar noklusējuma vērtību piešķiršanu:

Lokalizācija: Noklusējuma vērtības var būt nepieciešams lokalizēt, pamatojoties uz lietotāja valodu vai reģionu. Piemēram, noklusējuma valūtas simbols vai datuma formāts.
Kultūras normas: Noteiktas noklusējuma vērtības var būt nepieciešams pielāgot, pamatojoties uz kultūras normām. Piemēram, noklusējuma sveiciena ziņojumam dažādās kultūrās var būt jābūt atšķirīgam.
Pieejamība: Nodrošiniet, lai noklusējuma vērtības būtu pieejamas un saprotamas lietotājiem ar invaliditāti. Nodrošiniet skaidrus un aprakstošus apzīmējumus noklusējuma vērtībām lietotāja saskarnēs.
Laika joslas un datumi: Strādājot ar datumiem un laikiem, izmantojiet atbilstošas laika joslas un datuma formātus, lai nodrošinātu, ka noklusējuma vērtības tiek pareizi parādītas lietotājiem dažādos reģionos.

Piemērs: Lokalizācija ar Nullish Coalescing

Pieņemsim, ka vēlaties parādīt noklusējuma sveiciena ziņojumu dažādās valodās, pamatojoties uz lietotāja lokalizāciju. Varat izmantot nullish coalescing operatoru, lai nodrošinātu noklusējuma ziņojumu, ja lokalizēts ziņojums nav pieejams.

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

  const message = localizedMessages[locale] ?? "Welcome!"; // Noklusējums uz angļu valodu, ja lokalizācija nav atrasta
  return message;
}

console.log(getWelcomeMessage("fr")); // Rezultāts: Bienvenue !
console.log(getWelcomeMessage("es")); // Rezultāts: Welcome! (Noklusējums uz angļu valodu)

Noslēgums

Nullish coalescing operators (??) ir vērtīgs papildinājums JavaScript valodai. Tas nodrošina precīzāku un uzticamāku veidu, kā piešķirt noklusējuma vērtības, salīdzinot ar OR operatoru (||), īpaši strādājot ar tādām vērtībām kā 0 vai tukšas virknes. Izprotot tā sintaksi, uzvedību un pielietojuma gadījumus, jūs varat rakstīt tīrāku, vieglāk uzturējamu kodu, kas precīzi apstrādā noklusējuma vērtību piešķiršanu. Atcerieties ņemt vērā pārlūkprogrammu saderību, operatoru prioritāti un globālos apsvērumus, izmantojot nullish coalescing operatoru savos projektos.

Ievērojot šajā ceļvedī izklāstītās labākās prakses, jūs varat efektīvi izmantot nullish coalescing operatoru, lai uzlabotu sava JavaScript koda kvalitāti un uzticamību, padarot to robustāku un vieglāk saprotamu. Atcerieties vienmēr savā kodā par prioritāti izvirzīt skaidrību un uzturējamību, un nullish coalescing operators var būt spēcīgs instruments šo mērķu sasniegšanā.