[Edit]

TypeScript - ?? operator null'owego scalania

1 contributors

2 contributions

0 discussions

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.

xxxxxxxxxx
 
// 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:

xxxxxxxxxx
 
const inputValue = null;
const defaultValue = 'Default value...';
​
const outputValue = inputValue ?? defaultValue;
​
console.log(outputValue); // Default value...

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

xxxxxxxxxx
 
var inputValue = null;
var defaultValue = 'Default value...';
​
var outputValue = inputValue === null || inputValue === undefined ? defaultValue : inputValue;
​
console.log(outputValue); // Default value...

Auto running

Uwaga

Edit

Nie używaj zamiennie:

xxxxxxxxxx
 
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:

xxxxxxxxxx
 
//           !!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

Auto running

Praktyczny przykład dla opertora || :

xxxxxxxxxx
 
//           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]

Auto running

Praktyczny przykład dla operatora ?? :

xxxxxxxxxx
 
//           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]