Javascript中是否有空合并运算符?

例如,在C#中,我可以这样做:

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

我可以为Javascript找到的最佳近似是使用条件运算符:

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

这有点讨厌IMHO。我能做得更好吗?


当前回答

使现代化

JavaScript现在支持空值合并运算符(??)。当左侧操作数为空或未定义时,它返回右侧操作数,否则返回左侧操作数。

旧答案

使用前请检查兼容性。


与C#空合并运算符(??)等效的JavaScript使用逻辑OR(||):

var whatIWant = someString || "Cookies!";

在某些情况下(在下文中进行了澄清),这种行为与C#的行为不匹配,但这是在JavaScript中分配默认值/替代值的通用、简洁的方法。


澄清

无论第一个操作数的类型如何,如果将其转换为布尔值结果为false,则赋值将使用第二个操作数。注意以下所有情况:

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

这意味着:

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"

其他回答

这里没有人提到NaN的潜力,对我来说,它也是一个空值。所以,我想再加上两美分。

对于给定代码:

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

如果要使用||运算符,将获得第一个非false值:

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

如果你使用新的??(空合并)运算符,将得到c,其值为:NaN

vas result = a ?? b ?? c ?? d ?? e ?? f; // result === NaN

我觉得这两个都不对。在我自己的联合逻辑小世界里,我认为未定义的、空的和NaN都是“空的”。所以,我希望从联合方法中得到d(零)。

如果任何人的大脑都像我一样工作,并且你想排除NaN,那么这个定制的联合方法(与这里发布的方法不同)将实现这一点:

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;
}

对于那些希望代码尽可能简短,并且不介意有点不够清晰的人,您也可以按照@impinball的建议使用此选项。这利用了NaN永远不等于NaN的事实。你可以在这里读到更多:为什么NaN不等于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;
}

在阅读了您的澄清之后,@Ates Goral的回答提供了如何在JavaScript中执行您在C#中执行的相同操作。

@Gumbo的答案提供了检查空值的最佳方法;然而,注意JavaScript中==与==的区别很重要,特别是在检查未定义和/或null时。

这里有一篇关于两个术语的区别的非常好的文章。基本上,请理解如果使用==而不是==,JavaScript将尝试合并正在比较的值,并在合并后返回比较结果。

链接多个值/多个值

启用“短路”:如果第一个值之一有效,则不进行任何进一步评估这意味着顺序很重要,最左边的值优先

const value = first ?? second ?? third ?? "default";

我试图检查输入是否为空,然后相应地使用该值。这是我的密码。

let valueToBeConsidered = !inputValue ? "trueCondition" : "falseCondition",

因此,如果inputValue为空,则valueToBeConsidered=false条件;如果inputValue具有值,则valuetoBeConsided=true条件

现在,它在Chrome、Edge、Firefox、Safari等主流浏览器的最新版本中得到了完全支持。下面是空运算符和空合并运算符的比较

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