Languages
[Edit]
PL

TypeScript - ?? operator null'owego scalania

3 points
Created by:
Sylwia
3590

W tym krótkim artykule chcielibyśmy wyjaśnić, czym jest i jak działa operator null'owego scalania - Nullish Coalescing Operator (??) w TypeScript.

?? został wprowadzony w TypeScript 3.7, aby pomóc w uzyskaniu wartości alternatywnej (możemy ją również nazwać wartością domyślną), gdy bieżącą wartością zmiennej jest null lub undefined.

// Składnia:
const outputValue = inputValue ?? defaultValue;

// Jeśli inputValue ma wartość null lub undefined, wartość outputValue ma wartość defaultValue.

Uwaga: ?? jest stosunkowo nowym rozwiązaniem w ECMAScript (mo momęcia pisania tego artykułu mamy grudzień 2020).

Praktyczny przykład:

const inputValue = null;
const defaultValue = 'Default value...';

const outputValue = inputValue ?? defaultValue;

console.log(outputValue); // Default value...

Co jest równoważne gdybyśmy napisali:

// ONLINE-RUNNER:browser;

var inputValue = null;
var defaultValue = 'Default value...';

var outputValue = inputValue === null || inputValue === undefined ? defaultValue : inputValue;

console.log(outputValue); // Default value...

Uwaga

Nie używaj zamiennie:

const outputValue = inputValue ?? defaultValue;
// z
const outputValue = inputValue || defaultValue;

ponieważ:

  • || zwraca defaultValue zawsze kiedy operacja !!inputValue zwraca true,
  • ?? zwraca defaultValue zawsze tylko kiedy operacja inputValue === null || inputValue === undefined zwraca true.

Przykładowa lista dla różnych przypadków !!inputValue została przedstawiona poniżej:

// ONLINE-RUNNER:browser;

//           !!inputValue
//
console.log( !!null         ); // false
console.log( !!undefined    ); // false
console.log( !!true         ); // true
console.log( !!false        ); // false
console.log( !!1            ); // true
console.log( !!0            ); // false
console.log( !!NaN          ); // false
console.log( !!-Infinity    ); // true
console.log( !!+Infinity    ); // true
console.log( !!''           ); // false
console.log( !!'abc'        ); // true
console.log( !![]           ); // true
console.log( !!{}           ); // true
console.log( !!function(){} ); // true
console.log( !!window       ); // true

Praktyczny przykład dla opertora || :

// ONLINE-RUNNER:browser;

//           inputValue
//
console.log( null         || 'Default value' ); // Default value
console.log( undefined    || 'Default value' ); // Default value
console.log( true         || 'Default value' ); // true
console.log( false        || 'Default value' ); // Default value
console.log( 1            || 'Default value' ); // 1
console.log( 0            || 'Default value' ); // Default value
console.log( NaN          || 'Default value' ); // Default value
console.log( -Infinity    || 'Default value' ); // -Infinity
console.log( +Infinity    || 'Default value' ); // Infinity
console.log( ''           || 'Default value' ); // Default value
console.log( 'abc'        || 'Default value' ); // abc
console.log( []           || 'Default value' ); // <---------------- pusta tablica tutaj
console.log( {}           || 'Default value' ); // [object Object]
console.log( function(){} || 'Default value' ); // function(){}
console.log( window       || 'Default value' ); // [object Window]

Praktyczny przykład dla operatora ?? :

//           inputValue
//
console.log( null         ?? 'Default value' ); // Default value
console.log( undefined    ?? 'Default value' ); // Default value
console.log( true         ?? 'Default value' ); // true
console.log( false        ?? 'Default value' ); // false
console.log( 1            ?? 'Default value' ); // 1
console.log( 0            ?? 'Default value' ); // 0
console.log( NaN          ?? 'Default value' ); // NaN
console.log( -Infinity    ?? 'Default value' ); // -Infinity
console.log( +Infinity    ?? 'Default value' ); // Infinity
console.log( ''           ?? 'Default value' ); // <---------------- pusty ciąg tutaj
console.log( 'abc'        ?? 'Default value' ); // abc
console.log( []           ?? 'Default value' ); // <---------------- pusta tablica tutaj
console.log( {}           ?? 'Default value' ); // [object Object]
console.log( function(){} ?? 'Default value' ); // function(){}
console.log( window       ?? 'Default value' ); // [object Window]

Referencje

  1. Nullish Coalescing - TypeScript Docs
Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.

TypeScript (PL)

Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join