js中??是什么意思(示例场景)

 更新时间:2025年04月10日 10:23:25   作者:肖肖肖丽珠  
?? 是一个非常有用的运算符,特别适合在需要区分 null/undefined 和其他假值的场景中使用,它可以帮助你更精确地处理默认值逻辑,本文给大家介绍js中??是什么意思,感兴趣的朋友一起看看吧

在 JavaScript 中,?? 是一个逻辑运算符,称为 空值合并运算符(Nullish Coalescing Operator)。它用于检查左侧的值是否为 null 或 undefined,如果是,则返回右侧的值;否则返回左侧的值。

语法

leftExpr ?? rightExpr
  • leftExpr: 左侧的表达式。
  • rightExpr: 右侧的表达式。

行为

  • 如果 leftExpr 是 null 或 undefined,则返回 rightExpr
  • 如果 leftExpr 不是 null 或 undefined,则返回 leftExpr

示例

const value1 = null;
const value2 = undefined;
const value3 = 0;
const value4 = '';
const value5 = 'Hello';
console.log(value1 ?? 'default'); // 输出: 'default'(因为 value1 是 null)
console.log(value2 ?? 'default'); // 输出: 'default'(因为 value2 是 undefined)
console.log(value3 ?? 'default'); // 输出: 0(因为 value3 不是 null 或 undefined)
console.log(value4 ?? 'default'); // 输出: ''(因为 value4 不是 null 或 undefined)
console.log(value5 ?? 'default'); // 输出: 'Hello'(因为 value5 不是 null 或 undefined)

与 || 的区别

?? 和 || 都可以用于提供默认值,但它们的行为有所不同:

  • || 会在左侧值为 假值(falsy)时返回右侧值。假值包括:false0''nullundefinedNaN
  • ?? 只会在左侧值为 null 或 undefined 时返回右侧值。

示例对比

const value1 = 0;
const value2 = '';
console.log(value1 || 'default'); // 输出: 'default'(因为 0 是假值)
console.log(value1 ?? 'default'); // 输出: 0(因为 0 不是 null 或 undefined)
console.log(value2 || 'default'); // 输出: 'default'(因为 '' 是假值)
console.log(value2 ?? 'default'); // 输出: ''(因为 '' 不是 null 或 undefined)

使用场景

  • 提供默认值: 当你希望仅在值为 null 或 undefined 时使用默认值,而不是其他假值(如 0 或 '')。
  • 避免意外行为: 当你需要区分 null/undefined 和其他假值时。

示例场景

function greet(name) {
  const displayName = name ?? 'Guest';
  console.log(`Hello, ${displayName}!`);
}
greet(null);      // 输出: Hello, Guest!
greet(undefined); // 输出: Hello, Guest!
greet('Alice');   // 输出: Hello, Alice!
greet('');        // 输出: Hello, !(空字符串不是 null 或 undefined)

注意事项

  • ?? 的优先级较低,因此在复杂表达式中可能需要使用括号来明确运算顺序。
  • ?? 不能直接与 && 或 || 混合使用,除非用括号明确优先级,否则会抛出语法错误。
// 错误示例
const result = a && b ?? c; // 语法错误
// 正确示例
const result = (a && b) ?? c;

总结

?? 是一个非常有用的运算符,特别适合在需要区分 null/undefined 和其他假值的场景中使用。它可以帮助你更精确地处理默认值逻辑。

到此这篇关于js中??是什么意思的文章就介绍到这了,更多相关js中??内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 小程序实现选择题选择效果

    小程序实现选择题选择效果

    这篇文章主要为大家详细介绍了小程序实现选择题选择效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • JavaScript大数相加相乘的实现方法实例

    JavaScript大数相加相乘的实现方法实例

    这篇文章主要给大家介绍了关于JavaScript大数相加相乘的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-10-10
  • 神奇!js+CSS+DIV实现文字颜色渐变效果

    神奇!js+CSS+DIV实现文字颜色渐变效果

    很神奇!js+CSS+DIV实现文字颜色渐变效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码

    jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码

    这篇文章主要介绍了jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码,通过jQuery相应鼠标事件控制页面元素的动态变换功能,非常具有实用价值,需要的朋友可以参考下
    2015-09-09
  • 理解javascript中try...catch...finally

    理解javascript中try...catch...finally

    这篇文章主要帮助大家理解javascript中try...catch...finally,从浅入深,一步步掌握javascript中try...catch...finally的使用方法,感兴趣的小伙伴们可以参考一下
    2015-12-12
  • javascript实现tab响应式切换特效

    javascript实现tab响应式切换特效

    这篇文章主要为大家介绍了javascript实现tab响应式切换特效,以一个完整的实例对tab响应式切换特效进行详细的分析,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • MyEclipse取消验证Js的两种方法

    MyEclipse取消验证Js的两种方法

    通过js写一个web工程的相关页面时感觉很卡,修改内存也不行下面有两种解决方法,大家可以尝试下
    2013-11-11
  • js实现tab切换效果实例

    js实现tab切换效果实例

    这篇文章主要介绍了js实现的tab标签切换效果,功能非常简单,实现了点击切换的效果,推荐给大家,有需要的小伙伴可以参考下。
    2015-09-09
  • webpack前端应用之基础打包实现

    webpack前端应用之基础打包实现

    本文主要介绍了webpack前端应用之基础打包实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-02-02
  • BootStrap CSS全局样式和表格样式源码解析

    BootStrap CSS全局样式和表格样式源码解析

    这篇文章主要为大家详细解析了BootStrap图片样式、辅助类样式和CSS组件源码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01

最新评论