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"

其他回答

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

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

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

是的,它很快就要来了。请参阅此处的提案和此处的实施状态。

它看起来像这样:

x ?? y

实例

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

是的,它的建议现在是第四阶段。这意味着该提案已准备好纳入正式的ECMAScript标准。您已经可以在Chrome、Edge和Firefox的最新桌面版本中使用它,但我们需要等待一段时间,直到该功能达到跨浏览器的稳定性。

查看以下示例以演示其行为:

//注意:只有在运行上述浏览器的最新版本时,这才有效const var1=未定义;const var2=“回退值”;常量结果=var1??var2;console.log(`${result}`中的空合并结果);

上一示例等效于:

const var1=未定义;const var2=“回退值”;常量结果=(var1!==null&&var1!===undefined)?变量1:var2;console.log(`${result}`中的空合并结果);

请注意,无效合并不会像||运算符那样威胁虚假值(它只检查未定义的值或空值),因此下面的代码片段将如下所示:

//注意:只有在运行上述浏览器的最新版本时,这才有效常量var1=“”;//空字符串const var2=“回退值”;常量结果=var1??var2;console.log(`${result}`中的空合并结果);


对于TypesScript用户,从TypeScript 3.7开始,该功能现在也可用。

现在,它在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

使现代化

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"