Gibt es einen "Null-Koaleszenz"-Operator in JavaScript?

Question

Gibt es einen Null-Koaleszenz-Operator in Javascript?

In C# kann ich zum Beispiel Folgendes tun:

String someString = null;
var whatIWant = someString ?? "Cookies!";

Die beste Annäherung, die ich für Javascript herausfinden kann, ist die Verwendung des Bedingungsoperators:

var someString = null;
var whatIWant = someString ? someString : 'Cookies!';

Was IMHO ziemlich eklig ist. Kann ich es besser machen?

Answer 1

Zu viel Gerede, es gibt hier zwei Punkte:

1. Logisches ODER

const foo = '' || 'Standard-String';

console.log(foo); // Ausgabe ist 'default string'

2. Nullischer Koaleszenzoperator

const foo = '' ?? 'Standard-String';

console.log(foo); // Ausgabe ist leere Zeichenkette, d.h. ''

Der nullish coalescing operator (??) ist ein logischer Operator, der seinen rechten Operanden zurückgibt, wenn sein linker Operand null oder undefiniert ist, und ansonsten seinen linken Operanden zurückgibt.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator

Answer 2

Es wird hoffentlich bald in Javascript verfügbar sein, da es sich ab April 2020 in der Angebotsphase befindet. Sie können den Status hier für Kompatibilität und Unterstützung überwachen - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator

Für Leute, die Typescript verwenden, können Sie die Nullkoaleszenzoperator de Typografie 3.7

Aus den Unterlagen -

Sie können sich dieses Merkmal - die ?? Operator - als eine Möglichkeit, "zu fallen auf einen Standardwert zurückgreifen, wenn es um null o undefined . Wenn wir Code schreiben wie

let x = foo ?? bar();

Dies ist eine neue Art zu sagen, dass der Wert foo wird verwendet, wenn es "anwesend" ist; wenn es aber null o undefined , berechnen bar() an seiner Stelle.

Answer 3

Sie müssen alte Browser unterstützen und eine Objekthierarchie haben

body.head.eyes[0]  //body, head, eyes  may be null 

können dies verwenden,

(((body||{}) .head||{}) .eyes||[])[0] ||'left eye'

Answer 4

ECMAScript 2021 zwei neue Funktionen aktiviert:

1. Nullischer Koaleszenzoperator (??) ist ein logischer Operator, der seinen rechten Operanden zurückgibt, wenn sein linker Operand entweder null oder undefiniert ist, und ansonsten seinen linken Operanden zurückgibt.

   let b = undefined ?? 5;

   console.log(b); // 5

2. Logische nullische Zuweisung (x ??= y) Operator, der nur zuweist, wenn x einen Nullwert hat (null oder undefiniert).

   const car = {speed : 20}; car.speed ??= 5; console.log(car.speed); car.name ??= "reno"; console.log(car.name);

Mehr über die logische Zuordnung von Nullen finden Sie hier https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_nullish_assignment

Mehr über den Nullish Coalescing Operator finden Sie hier https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator

Answer 5

Jetzt hat es volle Unterstützung in der neuesten Version von großen Browsern wie Chrome, Edge, Firefox, Safari etc. Hier ist der Vergleich zwischen dem Null-Operator und dem Nullish Coalescing Operator

const response = {
        settings: {
            nullValue: null,
            height: 400,
            animationDuration: 0,
            headerText: '',
            showSplashScreen: false
        }
    };
    /* OR Operator */
    const undefinedValue = response.settings.undefinedValue || 'Default Value'; // 'Default Value'
    const nullValue = response.settings.nullValue || 'Default Value'; // 'Default Value'
    const headerText = response.settings.headerText || 'Hello, world!'; //  'Hello, world!'
    const animationDuration = response.settings.animationDuration || 300; //  300
    const showSplashScreen = response.settings.showSplashScreen || true; //  true
    /* Nullish Coalescing Operator */
    const undefinedValue = response.settings.undefinedValue ?? 'Default Value'; // 'Default Value'
    const nullValue = response.settings.nullValue ?? ''Default Value'; // 'Default Value'
    const headerText = response.settings.headerText ?? 'Hello, world!'; // ''
    const animationDuration = response.settings.animationDuration ?? 300; // 0
    const showSplashScreen = response.settings.showSplashScreen ?? true; //  false