JavaScript Nulinės Reikšmės Sujungimas: Išsamus Vadovas Apie Numatytųjų Reikšmių Priskyrimą

JavaScript kalboje numatytųjų reikšmių priskyrimas yra įprasta užduotis. Tradiciškai programuotojai šiam tikslui naudojo ARBA operatorių (||). Tačiau nulinės reikšmės sujungimo operatorius (??), pristatytas ECMAScript 2020, suteikia tikslesnį ir patikimesnį būdą tvarkyti numatytųjų reikšmių priskyrimus, ypač dirbant su null arba undefined reikšmėmis. Šis vadovas išsamiai analizuoja nulinės reikšmės sujungimo operatorių, nagrinėja jo sintaksę, elgseną, skirtumus nuo ARBA operatoriaus ir praktinio pritaikymo atvejus.

Kas yra Nulinės Reikšmės Sujungimas?

Nulinės reikšmės sujungimo operatorius (??) yra loginis operatorius, kuris grąžina dešinės pusės operandą, kai kairės pusės operandas yra null arba undefined. Priešingu atveju jis grąžina kairės pusės operandą. Paprasčiau tariant, jis suteikia numatytąją reikšmę tik tada, kai kintamasis yra griežtai null arba undefined.

Sintaksė

Nulinės reikšmės sujungimo operatoriaus sintaksė yra paprasta:

kairysisOperandas ?? dešinysisOperandas

Čia kairysisOperandas yra kintamasis arba išraiška, kurią norite patikrinti, ar ji nėra null arba undefined, o dešinysisOperandas yra numatytoji reikšmė, kurią norite priskirti, jei kairysisOperandas iš tikrųjų yra null arba undefined.

Pavyzdys

Panagrinėkime šį pavyzdį:

const username = null ?? "Svečias";
console.log(username); // Išvestis: Svečias

const age = undefined ?? 25;
console.log(age); // Išvestis: 25

const city = "Londonas" ?? "Nežinoma";
console.log(city); // Išvestis: Londonas

Šiame pavyzdyje username priskiriama numatytoji reikšmė „Svečias“, nes iš pradžių ji yra null. Panašiai, age priskiriama 25, nes ji prasideda kaip undefined. Tačiau city išlaiko savo pradinę reikšmę „Londonas“, nes ji nėra nei null, nei undefined.

Nulinės ir Klaidingos (Falsy) Reikšmės

Svarbu suprasti skirtumą tarp nulinių ir klaidingų (falsy) reikšmių JavaScript kalboje. Nulinė reikšmė yra arba null, arba undefined. Klaidinga (falsy) reikšmė yra reikšmė, kuri laikoma klaidinga (false), kai naudojama loginės išraiškos kontekste. Klaidingos reikšmės apima:

• null
• undefined
• 0 (nulis)
• NaN (Ne Skaičius)
• '' (tuščia eilutė)
• false

Pagrindinis skirtumas yra tas, kad nulinės reikšmės sujungimo operatorius tikrina tik null arba undefined, o ARBA operatorius (||) tikrina bet kokią klaidingą (falsy) reikšmę.

Skirtumas Tarp ?? ir ||

ARBA operatorius (||) yra loginis ARBA operatorius, kuris grąžina dešinės pusės operandą, jei kairės pusės operandas yra klaidingas (falsy). Nors jį galima naudoti numatytosioms reikšmėms priskirti, jis gali sukelti netikėtą elgseną dirbant su tokiomis reikšmėmis kaip 0 ar tuščia eilutė.

Pavyzdys: || Spąstai

const quantity = 0 || 10; // Siekiame, kad numatytoji reikšmė būtų 10, jei kiekis nenurodytas
console.log(quantity); // Išvestis: 10 (Netikėta!), nes 0 yra klaidinga reikšmė

const text = '' || 'Numatytasis Tekstas'; //Siekiame, kad numatytasis tekstas būtų, jei tekstas nenurodytas
console.log(text); // Išvestis: Numatytasis Tekstas (Netikėta!), nes '' yra klaidinga reikšmė

Pirmajame pavyzdyje norėjome priskirti numatytąjį kiekį 10 tik tuo atveju, jei quantity nebuvo nurodytas (null arba undefined). Tačiau, kadangi 0 yra klaidinga reikšmė, ARBA operatorius neteisingai priskyrė numatytąją reikšmę. Panašiai, tuščia eilutė lemia, kad rodomas numatytasis tekstas, net jei eilutė egzistuoja (bet yra tuščia).

?? Naudojimas Tikslumui

Perrašykime ankstesnį pavyzdį naudodami nulinės reikšmės sujungimo operatorių:

const quantity = 0 ?? 10;
console.log(quantity); // Išvestis: 0 (Teisingai!)

const text = '' ?? 'Numatytasis Tekstas';
console.log(text); // Išvestis: '' (Teisingai!)

Dabar išvestis yra tokia, kokios tikėtasi. Nulinės reikšmės sujungimo operatorius tikrina tik null arba undefined, todėl 0 ir '' yra laikomos galiojančiomis reikšmėmis, o jų pradinės reikšmės išsaugomos.

Nulinės Reikšmės Sujungimo Panaudojimo Atvejai

Nulinės reikšmės sujungimo operatorius yra naudingas įvairiais atvejais, kai reikia pateikti numatytąsias reikšmes tik tada, kai kintamasis yra griežtai null arba undefined. Štai keletas dažniausių panaudojimo atvejų:

1. Pasirinktinių Funkcijos Parametrų Tvarkymas

Apibrėždami funkciją su pasirinktiniais parametrais, galite naudoti nulinės reikšmės sujungimo operatorių, kad pateiktumėte numatytąsias reikšmes, jei parametrai nebuvo nurodyti.

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

greet(); // Išvestis: Sveiki, Vartotojas!
greet("Alisa"); // Išvestis: Sveiki, Alisa!
greet("Bobas", "Sveikinimai"); // Išvestis: Sveikinimai, Bobas!

2. Numatytųjų Konfigūracijos Parinkčių Nustatymas

Dirbdami su konfigūracijos objektais, galite naudoti nulinės reikšmės sujungimo operatorių, kad užtikrintumėte, jog bus naudojamos numatytosios reikšmės, jei tam tikros konfigūracijos parinktys nenurodytos.

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

function fetchData(options) {
  const timeout = options.timeout ?? 10000; // Numatytasis laukimo laikas - 10 sekundžių
  const retries = options.retries ?? 5; // Numatytieji 5 bandymai
  console.log(`Laukimo laikas: ${timeout}, Bandymai: ${retries}`);
}

fetchData(config); // Išvestis: Laukimo laikas: 5000, Bandymai: 3
fetchData({}); // Išvestis: Laukimo laikas: 10000, Bandymai: 5
fetchData({timeout:null, retries: undefined}); // Išvestis: Laukimo laikas: 10000, Bandymai: 5

3. Prieiga Prie Įdėtųjų Objekto Ypatybių

Prieinant prie įdėtųjų objektų ypatybių, nulinės reikšmės sujungimo operatorius gali būti derinamas su pasirinktiniu grandininiu susiejimu (?.), kad būtų pateiktos numatytosios reikšmės, jei kuri nors iš tarpinių ypatybių yra null arba undefined.

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

const cityName = user?.profile?.address?.city ?? "Nežinoma";
console.log(cityName); // Išvestis: New York

const unknownUser = {};
const unknownCityName = unknownUser?.profile?.address?.city ?? "Nežinoma";
console.log(unknownCityName); // Išvestis: Nežinoma

4. Darbas su API ir Išoriniais Duomenimis

Gaunant duomenis iš API ar išorinių šaltinių, nulinės reikšmės sujungimo operatorius gali būti naudojamas numatytosioms reikšmėms pateikti, jei trūksta tam tikrų duomenų laukų arba jų reikšmės yra null arba undefined. Apsvarstykite galimybę gauti vartotojų duomenis iš skirtingų regionų. Tarkime, kai kuriuose regionuose vartotojo duomenyse gali nebūti lauko `country`.

async function getUserData(userId) {
  try {
    const response = await fetch(`https://api.example.com/users/${userId}`);
    const data = await response.json();
    const country = data.country ?? "Nežinoma Šalis";
    const timezone = data.timezone ?? "UTC";
    console.log(`Vartotojas iš: ${country}, Laiko juosta: ${timezone}`);
  } catch (error) {
    console.error("Klaida gaunant vartotojo duomenis:", error);
  }
}

// Simuliuojant skirtingus API atsakymus:
const userWithCountry = { name: "John", country: "USA", timezone: "EST" };
const userWithoutCountry = { name: "Jane", timezone: "GMT" };

// Norint tai išbandyti, jums reikėtų tikros API arba imituoti fetch funkciją.
// Demonstraciniais tikslais, imituokime atsakymus:
global.fetch = async (url) => {
    if (url.includes("123")) {
        return { json: async () => userWithCountry };
    } else if (url.includes("456")) {
        return { json: async () => userWithoutCountry };
    }
    throw new Error("Netikėtas URL");
};

getUserData(123); // Išvestis: Vartotojas iš: USA, Laiko juosta: EST
getUserData(456); // Išvestis: Vartotojas iš: Nežinoma Šalis, Laiko juosta: GMT

Operatorių Pirmumas

Nulinės reikšmės sujungimo operatorius turi santykinai žemą operatorių pirmumą. Jis yra žemesnis nei ARBA (||) ir IR (&&) operatoriai. Todėl, derinant nulinės reikšmės sujungimo operatorių su kitais loginiais operatoriais, būtina naudoti skliaustus, kad aiškiai apibrėžtumėte operacijų tvarką. To nepadarius, gali kilti sintaksės klaidų arba netikėta elgsena.

Pavyzdys: Skliaustų Naudojimas Aiškumui

// Be skliaustų (Sintaksės klaida)
// const result = false || null ?? "Numatytoji"; // SyntaxError: Unexpected token '??'

// Su skliaustais (Teisingai)
const result = false || (null ?? "Numatytoji");
console.log(result); // Išvestis: Numatemoji

const anotherResult = (false || null) ?? "Numatytoji";
console.log(anotherResult); // Išvestis: null

Pirmajame pavyzdyje skliaustų nebuvimas sukelia SyntaxError, nes JavaScript variklis negali nustatyti numatytos operacijų tvarkos. Pridėdami skliaustus, mes aiškiai nurodome varikliui pirmiausia įvertinti nulinės reikšmės sujungimo operatorių. Antrasis pavyzdys yra teisingas; tačiau išvestis skiriasi, nes pirmiausia įvertinama || išraiška.

Suderinamumas su Naršyklėmis

Nulinės reikšmės sujungimo operatorius (??) yra gana nauja funkcija, todėl svarbu atsižvelgti į suderinamumą su naršyklėmis, ypač jei orientuojatės į senesnes naršykles. Dauguma šiuolaikinių naršyklių palaiko nulinės reikšmės sujungimo operatorių, įskaitant:

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

Jei reikia palaikyti senesnes naršykles, galite naudoti transpiliatorių, pvz., Babel, kad konvertuotumėte savo kodą į suderinamą JavaScript versiją. Babel transformuos ?? operatorių į lygiavertį JavaScript kodą, kuris veikia senesnėse aplinkose.

Geriausios Praktikos

Štai keletas geriausių praktikų, kaip efektyviai naudoti nulinės reikšmės sujungimo operatorių:

• Naudokite ?? nulinių reikšmių patikrinimui: Naudokite nulinės reikšmės sujungimo operatorių (??), kai norite pateikti numatytąją reikšmę tik tada, kai kintamasis yra null arba undefined.
• Naudokite skliaustus sudėtingoms išraiškoms: Derindami nulinės reikšmės sujungimo operatorių su kitais loginiais operatoriais, naudokite skliaustus, kad aiškiai apibrėžtumėte operacijų tvarką.
• Atsižvelkite į suderinamumą su naršyklėmis: Patikrinkite suderinamumą su naršyklėmis ir, jei reikia, naudokite transpiliatorių, kad palaikytumėte senesnes naršykles.
• Naudokite nuosekliai: Taikykite ?? ten, kur tinka, kad visame projekte būtų labiau nuspėjamas kodavimo stilius.
• Derinkite su pasirinktiniu grandininiu susiejimu: Naudokite ?? kartu su pasirinktiniu grandininiu susiejimu ?., kad saugiai pasiektumėte ir priskirtumėte numatytąsias reikšmes įdėtosioms objektų ypatybėms.

Globalūs Aspektai

Kuriant programinę įrangą pasaulinei auditorijai, atsižvelkite į šiuos punktus, susijusius su numatytųjų reikšmių priskyrimu:

• Lokalizacija: Numatytosios reikšmės gali būti lokalizuotos atsižvelgiant į vartotojo kalbą ar regioną. Pavyzdžiui, numatytasis valiutos simbolis ar datos formatas.
• Kultūrinės Normos: Tam tikras numatytąsias reikšmes gali tekti koreguoti atsižvelgiant į kultūrines normas. Pavyzdžiui, numatytasis sveikinimo pranešimas skirtingose kultūrose gali skirtis.
• Prieinamumas: Užtikrinkite, kad numatytosios reikšmės būtų prieinamos ir suprantamos vartotojams su negalia. Pateikite aiškias ir aprašančias etiketes numatytosioms reikšmėms vartotojo sąsajose.
• Laiko Juostos ir Datos: Dirbdami su datomis ir laikais, naudokite tinkamas laiko juostas ir datos formatus, kad numatytosios reikšmės būtų teisingai rodomos vartotojams skirtinguose regionuose.

Pavyzdys: Lokalizacija su Nulinės Reikšmės Sujungimu

Tarkime, norite rodyti numatytąjį pasveikinimo pranešimą skirtingomis kalbomis, atsižvelgiant į vartotojo lokalę. Galite naudoti nulinės reikšmės sujungimo operatorių, kad pateiktumėte numatytąjį pranešimą, jei lokalizuotas pranešimas nepasiekiamas.

function getWelcomeMessage(locale) {
  const localizedMessages = {
    en: "Welcome!",
    fr: "Bienvenue !",
    lt: "Sveiki atvykę!"
  };

  const message = localizedMessages[locale] ?? "Welcome!"; // Jei lokalė nerasta, numatytoji reikšmė yra anglų kalba
  return message;
}

console.log(getWelcomeMessage("lt")); // Išvestis: Sveiki atvykę!
console.log(getWelcomeMessage("es")); // Išvestis: Welcome! (Numatytoji reikšmė - anglų kalba)

Išvada

Nulinės reikšmės sujungimo operatorius (??) yra vertingas JavaScript kalbos papildymas. Jis suteikia tikslesnį ir patikimesnį būdą priskirti numatytąsias reikšmes, palyginti su ARBA operatoriumi (||), ypač dirbant su tokiomis reikšmėmis kaip 0 ar tuščios eilutės. Suprasdami jo sintaksę, elgseną ir panaudojimo atvejus, galite rašyti švaresnį, lengviau prižiūrimą kodą, kuris tiksliai tvarko numatytųjų reikšmių priskyrimus. Naudodami nulinės reikšmės sujungimo operatorių savo projektuose, nepamirškite atsižvelgti į suderinamumą su naršyklėmis, operatorių pirmumą ir globalius aspektus.

Laikydamiesi šiame vadove pateiktų geriausių praktikų, galite efektyviai išnaudoti nulinės reikšmės sujungimo operatorių, kad pagerintumėte savo JavaScript kodo kokybę ir patikimumą, padarydami jį tvirtesnį ir lengviau suprantamą. Atminkite, kad visada turėtumėte teikti pirmenybę kodo aiškumui ir priežiūrai, o nulinės reikšmės sujungimo operatorius gali būti galingas įrankis siekiant šių tikslų.