【问题标题】：Is there a "null coalescing" operator in JavaScript?JavaScript 中是否有“空值合并”运算符？
【发布时间】：2010-10-03 08:23:51
【问题描述】：

Javascript 中有空合并运算符吗？

例如，在 C# 中，我可以这样做：

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

我可以为 Javascript 找出的最佳近似值是使用条件运算符：

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

恕我直言，这有点恶心。我能做得更好吗？

【问题讨论】：

2018 年的注释：x ?? y 语法现在处于第 1 阶段提案状态 - nullish coalescing
现在有一个 Babel plugin 包含了这种精确的语法。
2019 年的注意事项：现在是第 3 阶段状态！
2020 年 1 月的注意事项：空值合并运算符在 Firefox 72 中本机可用，但可选链接运算符仍然不可用。
无效的合并运算符 (x ?? y) 和可选的链接运算符 (user.address?.street) 现在都处于第 4 阶段。这里有一个很好的说明：2ality.com/2015/11/tc39-process.html#stage-4%3A-finished。

标签： javascript operators null-coalescing-operator null-coalescing

【解决方案1】：

更新

JavaScript 现在支持nullish coalescing operator (??)。当其左侧操作数为null 或undefined 时返回其右侧操作数，否则返回其左侧操作数。

旧答案

使用前请检查兼容性。

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"

【讨论】：

字符串如“false”、“undefined”、“null”、“0”、“empty”、“deleted”都是真，因为它们是非空字符串。
值得注意的是，|| 返回第一个“truey”值或最后一个“falsey”值（如果没有可以评估为 true），而 && 以相反的方式工作：返回最后一个真值或第一个假值。
@JustinJohnson 提出了一个很好的观点。这个答案比较了所有三个：?? vs || vs &&。

【解决方案2】：

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

此解决方案的工作方式类似于 SQL 合并函数，它接受任意数量的参数，如果它们都没有值则返回 null。它的行为类似于 C# ??运算符的意义在于，“”、false 和 0 被视为 NOT NULL，因此算作实际值。如果您来自.net 背景，这将是最自然的感觉解决方案。

【讨论】：

对于这么晚的添加表示歉意，但我只想指出，为了完整起见，该解决方案确实有一个警告，即它没有短路评估；如果您的参数是函数调用，那么无论是否返回它们的值，它们都将全部被评估，这与逻辑 OR 运算符的行为不同，因此值得注意。

【解决方案3】：

是的，它即将推出。见proposal here 和implementation status here。

看起来像这样：

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

【讨论】：

【解决方案4】：

如果 || 代替 C# 的 ?? 在您的情况下还不够好，因为它会吞下空字符串和零，您可以随时编写自己的函数：

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

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

【讨论】：

alert(null || '') 仍然提醒空字符串，我想我实际上喜欢 alert('' || 'blah') 提醒 blah 而不是空字符串 - 很高兴知道尽管！ (+1)
我想我实际上可能更喜欢定义一个函数，如果（严格）为 null/undefined 则返回 false，否则返回 true - 将其与逻辑或一起使用；它可能比许多嵌套函数调用更具可读性。例如$N(a) || $N(b) || $N(c) || d 比 $N($N($N(a, b), c), d) 更具可读性。

【解决方案5】：

这里没有人提到NaN 的潜力，这对我来说也是一个空值。所以，我想我会加两分钱。

对于给定的代码：

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

如果您要使用|| 运算符，您会得到第一个非假值：

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

如果您使用新的??（空合并）运算符，您将获得c，其值为：NaN

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

这些都不在我看来是正确的。在我自己的合并逻辑小世界中，可能与您的世界不同，我认为 undefined、null 和 NaN 都是“null-ish”。所以，我希望从 coalesce 方法中返回 d（零）。

如果有人的大脑像我一样工作，并且您想排除 NaN，那么这个自定义的 coalesce 方法（与 the one posted here 不同）将完成：

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 的事实。你可以在这里阅读更多内容：Why is NaN not equal to 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;
}

【讨论】：

最佳实践 - 将参数视为类似数组，利用 NaN ！== NaN（typeof + num.toString() === 'NaN' 是多余的），将当前参数存储在变量中而不是 arguments[i]。

【解决方案6】：

是的，它的proposal 现在是Stage 4。这意味着该提案已准备好包含在正式的 ECMAScript 标准中。您已经可以在 Chrome、Edge 和 Firefox 的最新桌面版本中使用它，但我们将不得不等待更长时间，直到此功能达到跨浏览器稳定性。

看看下面的例子来演示它的行为：

// 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}`);

前面的例子等价于：

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

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

请注意，无效合并将不会威胁 falsy 值 || 运算符所做的方式（它只检查 undefined 或null 值），因此以下 sn-p 将按如下方式运行：

// 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}`);

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

【讨论】：

这是巨大的！

【解决方案7】：

逻辑无效赋值，2020+ 解决方案

当前正在向浏览器中添加一个新运算符 ??=。这将空合并运算符 ?? 与赋值运算符 = 结合在一起。

注意：这在公共浏览器版本中并不常见还。将随着可用性的变化而更新。

??= 检查变量是否未定义或为空，如果已定义则短路。如果不是，则将右侧的值分配给变量。

基本示例

let a          // undefined
let b = null
let c = false

a ??= true  // true
b ??= true  // true
c ??= true  // false

对象/数组示例

let x = ["foo"]
let y = { foo: "fizz" }

x[0] ??= "bar"  // "foo"
x[1] ??= "bar"  // "bar"

y.foo ??= "buzz"  // "fizz"
y.bar ??= "buzz"  // "buzz"

x  // Array [ "foo", "bar" ]
y  // Object { foo: "fizz", bar: "buzz" }

Browser Support 21 年 4 月 - 84%

Mozilla Documentation

【讨论】：

【解决方案8】：

阅读您的说明后，@Ates Goral 的回答提供了如何在 JavaScript 中执行您在 C# 中执行的相同操作。

@Gumbo 的回答提供了检查 null 的最佳方法；但是，重要的是要注意 JavaScript 中 == 与 === 的区别尤其是，当涉及到检查 undefined 和/或 null 的问题时。

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

【讨论】：

【解决方案9】：

注意 JavaScript 特定的 null 定义。 javascript中有两个“无价值”的定义。 1. Null：当一个变量为null时，表示它里面没有数据，但是这个变量已经在代码中定义了。像这样：

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

在这种情况下，变量的类型实际上是 Object。测试一下。

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

未定义：当一个变量之前没有在代码中定义时，正如预期的那样，它不包含任何值。像这样：
```
if ( myUndefinedValue === undefined ) { window.alert('it is undefined'); }
// alerts
```

如果是这种情况，您的变量的类型是“未定义”。

请注意，如果您使用类型转换比较运算符 (==)，JavaScript 将对这两个空值执行相同的操作。要区分它们，请始终使用类型严格的比较运算符 (===)。

【讨论】：

其实null就是一个值。它是 Object 类型的特殊值。设置为 null 的变量意味着它包含数据，数据是对 null 对象的引用。可以使用代码中未定义的值定义变量。这与未声明的变量不同。
变量声明与否的实际区别：alert(window.test)/*undefined*/; alert("test" in window)/*false*/; window.test = 未定义；警报（window.test）/*未定义*/； alert("test" in window)/*true*/; for (var p in window) {/*p 可以是“测试”*/}
然而（有点自相矛盾）你可以define一个具有undefined值var u = undefined;的变量
@AtesGoral 重新为空。虽然您说的是真的，但按照惯例，“null”代表“缺少（有用的）数据”。因此，它被认为是“无数据”。并且不要忘记这是对“空合并运算符”问题的回答；在这种情况下，null 绝对被视为“无数据”——不管它在内部是如何表示的。

【解决方案10】：

请注意，React 的 create-react-app 工具链支持自 version 3.3.0 (released 5.12.2019) 以来的空值合并。来自发行说明：

可选链接和空值合并运算符

我们现在支持可选链接和无效合并运算符！

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

也就是说，如果您使用 create-react-app 3.3.0+，您今天就可以在您的 React 应用程序中开始使用 null-coalesce 运算符。

【讨论】：

【解决方案11】：

它有望很快在 Javascript 中可用，因为它在 2020 年 4 月处于提案阶段。您可以在此处监控状态以获取兼容性和支持 - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator

对于使用 Typescript 的人，您可以使用来自 Typescript 3.7 的 nullish coalescing operator

来自文档 -

您可以将此功能（?? 运算符）视为“跌倒”的一种方式处理null 或undefined 时返回默认值。什么时候我们像这样写代码

let x = foo ?? bar();

这是一种表示值foo 将在“存在”时使用的新方式；但是当它是null 或undefined 时，在它的位置计算bar()。

【讨论】：

【解决方案12】：

`??` vs `||` vs `&&`

其他答案都没有比较所有这三个。由于Justin Johnson's comment 拥有如此多的选票，并且由于double question mark vs && in javascript 被标记为与此相同，因此在答案中包含&& 是有意义的。

首先，受贾斯汀约翰逊评论的启发：

|| 返回第一个“truey”值，否则返回最后一个值。
&& 返回第一个“falsey”值，否则返回最后一个值。
?? 返回第一个非空、非未定义的值，否则返回最后一个值，无论它是什么。

然后，在现场代码中演示：

let F1,
    F2 = null,
    F3 = 0,
    F4 = '',
    F5 = parseInt('Not a number (NaN)'),
    T1 = 3,
    T2 = 8

console.log( F1 || F2 || F3 || F4 || F5 || T1 || T2 ) // 3 (T1)
console.log( F1 || F2 || F3 || F4 || F5 )             // NaN (F5)

console.log( T1 && T2 && F1 && F2 && F3 && F4 && F5 ) // undefined (F1)
console.log( T1 && T2 )                               // 8 (T2)

console.log( F1 ?? F2 ?? F3 ?? F4 ?? F5 ?? T1 )       // 0 (F3)
console.log( F1 ?? F2)                                // null (F2)

【讨论】：

【解决方案13】：

需要支持旧浏览器并有对象层次结构

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

可以用这个，

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

【讨论】：

【解决方案14】：

废话不多说，这里有两点：

逻辑或

const foo = '' || '默认字符串';

console.log(foo); // 输出是'默认字符串'

空值合并运算符

const foo = '' ?? '默认字符串';

console.log(foo); // 输出为空字符串，即''

nullish 合并运算符 (??) 是一种逻辑运算符，当其左侧操作数为 null 或未定义时返回其右侧操作数，否则返回其左侧操作数。

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

【讨论】：

在运营商发布之前，这次谈话是必要的。但是，由于您的回答比@faithful 的回答差而且在时间上比@faithful 的回答晚得多，所以我认为您的谈话太多了。

【解决方案15】：

现在它已全面支持最新版本的主流浏览器，如 Chrome、Edge、Firefox、Safari 等。以下是 null 运算符和 Nullish Coalescing 运算符的比较

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

【讨论】：

【解决方案16】：

使用 Babel 的人，需要升级到最新版本才能使用 nullish coalescing (??)：

Babel 7.8.0 默认支持 ECMAScript 2020 的新特性：你不需要启用单个插件来进行无效合并 (??), 可选链 (?.) 和动态 import() 不再使用预设环境

来自https://babeljs.io/blog/2020/01/11/7.8.0

【讨论】：

【解决方案17】：

ECMAScript 2021 启用了两个新功能：

空值合并运算符 (??) 这是一个逻辑运算符，当其左侧操作数为 null 或未定义时返回其右侧操作数，否则返回其左侧操作数。

let b = undefined ?? 5;

console.log(b); // 5

逻辑空值赋值 (x ??= y) 运算符，仅在 x 具有空值（null 或未定义）时进行赋值。

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

更多关于逻辑无效赋值的信息可以在这里找到https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_nullish_assignment

更多关于 Nullish 合并运算符的信息可以在这里找到 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator

【讨论】：

澄清

示例

逻辑无效赋值，2020+ 解决方案

基本示例

对象/数组示例

?? vs || vs &amp;&amp;

`??` vs `||` vs `&&`