Existe-t-il un opérateur de «coalescence nulle» en JavaScript?

Existe-t-il un opérateur de coalescence nul en Javascript?

Par exemple, en C #, je peux faire ceci:

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

La meilleure approximation que je puisse trouver pour Javascript utilise l'opérateur conditionnel:

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

Ce qui est sorta icky à mon humble avis. Puis-je faire mieux?

Mise à jour

JavaScript prend désormais en charge l' opérateur de coalescence nul (??) . Il renvoie son opérande de droite lorsque son opérande de gauche est nullou undefined, et renvoie sinon son opérande de gauche.

Veuillez vérifier la compatibilité avant de l'utiliser.

L'équivalent JavaScript de l'opérateur de coalescence nul C # ( ??) utilise un OU logique ( ||):

var whatIWant = someString || "Cookies!";

Il y a des cas (clarifiés ci-dessous) où le comportement ne correspondra pas à celui de C #, mais c'est la manière générale et laconique d'attribuer des valeurs par défaut / alternatives en JavaScript.

Clarification

Quel que soit le type du premier opérande, si la conversion en un résultat booléen entraîne false, l'affectation utilisera le deuxième opérande. Méfiez-vous de tous les cas ci-dessous:

alert(Boolean(null)); // false
alert(Boolean(undefined)); // false
alert(Boolean(0)); // false
alert(Boolean("")); // false
alert(Boolean("false")); // true -- gotcha! :)

Ça signifie:

var whatIWant = null || new ShinyObject(); // is a new shiny object
var whatIWant = undefined || "well defined"; // is "well defined"
var whatIWant = 0 || 42; // is 42
var whatIWant = "" || "a million bucks"; // is "a million bucks"
var whatIWant = "false" || "no way"; // is "false"

function coalesce() {
    var len = arguments.length;
    for (var i=0; i<len; i++) {
        if (arguments[i] !== null && arguments[i] !== undefined) {
            return arguments[i];
        }
    }
    return null;
}

var xyz = {};
xyz.val = coalesce(null, undefined, xyz.val, 5);

// xyz.val now contains 5

cette solution fonctionne comme la fonction de fusion SQL, elle accepte n'importe quel nombre d'arguments et retourne null si aucun d'entre eux n'a de valeur. Il se comporte comme le C # ?? dans le sens où "", false et 0 sont considérés comme NON NULS et comptent donc comme des valeurs réelles. Si vous venez d'un arrière-plan .net, ce sera la solution de sensation la plus naturelle.

Oui, ça arrive bientôt. Voir la proposition ici et l' état de mise en œuvre ici .

Cela ressemble à ceci:

x ?? y

Exemple

const response = {
  settings: {
    nullValue: null,
    height: 400,
    animationDuration: 0,
    headerText: '',
    showSplashScreen: false
  }
};

const undefinedValue = response.settings?.undefinedValue ?? 'some other default'; // result: 'some other default'
const nullValue = response.settings?.nullValue ?? 'some other default'; // result: 'some other default'
const headerText = response.settings?.headerText ?? 'Hello, world!'; // result: ''
const animationDuration = response.settings?.animationDuration ?? 300; // result: 0
const showSplashScreen = response.settings?.showSplashScreen ?? true; // result: false

Si ||le remplacement des C # ??n'est pas suffisant dans votre cas, car il avale des chaînes vides et des zéros, vous pouvez toujours écrire votre propre fonction:

 function $N(value, ifnull) {
    if (value === null || value === undefined)
      return ifnull;
    return value;
 }

 var whatIWant = $N(someString, 'Cookies!');

Personne n'a mentionné ici le potentiel pour NaN, qui - pour moi - est également une valeur nulle. J'ai donc pensé ajouter mes deux cents.

Pour le code donné:

var a,
    b = null,
    c = parseInt('Not a number'),
    d = 0,
    e = '',
    f = 1
;

Si vous deviez utiliser l' ||opérateur, vous obtenez la première valeur non fausse:

var result = a || b || c || d || e || f; // result === 1

Si vous utilisez la méthode de fusion standard, telle que publiée ici , vous obtiendrez c, qui a la valeur:NaN

var result = coalesce(a,b,c,d,e,f); // result.toString() === 'NaN'

Aucun de ces éléments ne me semble juste. Dans mon propre petit monde de logique de fusion, qui peut différer de votre monde, je considère undefined, null et NaN comme étant tous "null-ish". Donc, je m'attendrais à revenir d(zéro) de la méthode de fusion.

Si le cerveau de quelqu'un fonctionne comme le mien et que vous souhaitez l'exclure NaN, cette méthode accomplira cela:

function coalesce() {
    var i, undefined, arg;

    for( i=0; i < arguments.length; i++ ) {
        arg = arguments[i];
        if( arg !== null && arg !== undefined
            && (typeof arg !== 'number' || arg.toString() !== 'NaN') ) {
            return arg;
        }
    }
    return null;
}

Pour ceux qui veulent un code aussi court que possible, et qui ne se soucient pas d'un petit manque de clarté, vous pouvez également l'utiliser comme suggéré par @impinball. Cela profite du fait que NaN n'est jamais égal à NaN. Vous pouvez en savoir plus ici: Pourquoi NaN n'est-il pas égal à NaN?

function coalesce() {
    var i, arg;

    for( i=0; i < arguments.length; i++ ) {
        arg = arguments[i];
        if( arg != null && arg === arg ) { //arg === arg is false for NaN
            return arg;
        }
    }
    return null;
}

méfiez-vous de la définition spécifique JavaScript de null. il existe deux définitions de «aucune valeur» en javascript. 1. Null: lorsqu'une variable est nulle, cela signifie qu'elle ne contient aucune donnée, mais la variable est déjà définie dans le code. comme ça:

var myEmptyValue = 1;
myEmptyValue = null;
if ( myEmptyValue === null ) { window.alert('it is null'); }
// alerts

dans ce cas, le type de votre variable est en fait Object. Essaye-le.

window.alert(typeof myEmptyValue); // prints Object

2. Non défini: lorsqu'une variable n'a pas été définie auparavant dans le code, et comme prévu, elle ne contient aucune valeur. comme ça:

   if ( myUndefinedValue === undefined ) { window.alert('it is undefined'); }
   // alerts
   

si tel est le cas, le type de votre variable est «non défini».

notez que si vous utilisez l'opérateur de comparaison de conversion de type (==), JavaScript agira de la même manière pour ces deux valeurs vides. pour les distinguer, utilisez toujours l'opérateur de comparaison de type strict (===).

Après avoir lu votre clarification, la réponse de @Ates Goral explique comment effectuer la même opération que vous effectuez en C # en JavaScript.

La réponse de @ Gumbo fournit le meilleur moyen de vérifier la nullité; cependant, il est important de noter la différence par ==rapport ===à JavaScript, en particulier en ce qui concerne les problèmes de vérification de undefinedet / ou null.

Il y a un très bon article sur la différence en deux termes ici . Fondamentalement, sachez que si vous utilisez à la ==place de ===, JavaScript va essayer de fusionner les valeurs que vous comparez et de renvoyer le résultat de la comparaison après cette coalescence.

Notez que la create-react-appchaîne d' outils de React prend en charge la fusion nulle depuis la version 3.3.0 (publiée le 5.12.2019) . D'après les notes de version:

Opérateurs de chaînage et de coalescence nuls facultatifs

Nous prenons désormais en charge les opérateurs de chaînage et de coalescence nuls en option!

// Optional chaining
a?.(); // undefined if `a` is null/undefined
b?.c; // undefined if `b` is null/undefined

// Nullish coalescing
undefined ?? 'some other default'; // result: 'some other default'
null ?? 'some other default'; // result: 'some other default'
'' ?? 'some other default'; // result: ''
0 ?? 300; // result: 0
false ?? true; // result: false

Cela dit, si vous utilisez la version create-react-app3.3.0+, vous pouvez commencer à utiliser l'opérateur null-coalesce dès aujourd'hui dans vos applications React.

Oui, et sa proposition est maintenant à l' étape 4 . Cela signifie que la proposition est prête à être incluse dans la norme ECMAScript officielle. Vous pouvez déjà l'utiliser dans les versions de bureau récentes de Chrome, Edge et Firefox, mais nous devrons attendre un peu plus longtemps jusqu'à ce que cette fonctionnalité atteigne la stabilité entre les navigateurs.

Jetez un œil à l'exemple suivant pour illustrer son comportement:

// note: this will work only if you're running latest versions of aforementioned browsers
const var1 = undefined;
const var2 = "fallback value";

const result = var1 ?? var2;
console.log(`Nullish coalescing results in: ${result}`);

L'exemple précédent équivaut à:

const var1 = undefined;
const var2 = "fallback value";

const result = (var1 !== null && var1 !== undefined) ?
    var1 :
    var2;
console.log(`Nullish coalescing results in: ${result}`);

Notez que nullish coalescent sera pas menace falsy les valeurs de la façon dont l' ||opérateur a fait (il vérifie uniquement undefinedou nullvaleurs), d' où l'extrait suivant agira comme suit:

// note: this will work only if you're running latest versions of aforementioned browsers
const var1 = ""; // empty string
const var2 = "fallback value";

const result = var1 ?? var2;
console.log(`Nullish coalescing results in: ${result}`);

Pour les utilisateurs de TypesScript, à partir de TypeScript 3.7 , cette fonctionnalité est également disponible maintenant.

Nous espérons qu'il sera bientôt disponible en Javascript, car il est en phase de proposition à partir d'avril 2020. Vous pouvez surveiller l'état ici pour la compatibilité et le support - https://developer.mozilla.org/en-US/docs/Web/ JavaScript / Référence / Opérateurs / Nullish_coalescing_operator

Pour les personnes utilisant Typescript, vous pouvez utiliser l' opérateur de coalescence nulle de Typescript 3.7

De la documentation -

Vous pouvez considérer cette fonctionnalité - l' ??opérateur - comme un moyen de «revenir» à une valeur par défaut lorsque vous traitez avec nullou undefined. Quand on écrit du code comme

let x = foo ?? bar();

c'est une nouvelle façon de dire que la valeur foosera utilisée lorsqu'elle est «présente»; mais quand c'est nullou undefined, calculez bar()à sa place.

Ok une bonne réponse

Existe-t-il en JavaScript? Oui. MAIS. Il est actuellement en date du 2020-02-06 au stade 3 et n'est pas encore pris en charge partout. Suivez le lien dans l'URL ci-dessous et accédez aux en-têtes "Spécifications" et "Compatibilité du navigateur" pour plus d'informations sur l'endroit où il se trouve.

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

L'opérateur coalescent nul (??) est un opérateur logique qui renvoie son opérande de droite lorsque son opérande de gauche est nul ou non défini, et renvoie sinon son opérande de gauche.

Contrairement à l'opérateur logique OU (||), l'opérande de gauche est retourné s'il s'agit d'une valeur falsifiée qui n'est pas nulle ou non définie. En d'autres termes, si vous utilisez || pour fournir une valeur par défaut à une autre variable foo, vous pouvez rencontrer des comportements inattendus si vous considérez certaines valeurs de falsification comme utilisables (par exemple '' ou 0). Voir ci-dessous pour plus d'exemples.

Vous voulez des exemples? Suivez le lien que j'ai posté, il a tout.

Maintenant, il a un support complet dans la dernière version des principaux navigateurs comme Chrome, Edge, Firefox, Safari, etc. Voici la comparaison entre l'opérateur nul et l'opérateur coalescent nul.

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