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中??内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Bootstrap 网格系统布局详解

    Bootstrap 网格系统布局详解

    在平面设计中,网格是一种由一系列用于组织内容的相交的直线(垂直的、水平的)组成的结构(通常是二维的)。这篇文章主要介绍了Bootstrap 网格系统布局,需要的朋友可以参考下
    2017-03-03
  • javascript中SetInterval与setTimeout的定时器用法

    javascript中SetInterval与setTimeout的定时器用法

    Javascript的setTimeOut和setInterval函数应用非常广泛,它们都用来处理延时和定时任务,比如打开网页一段时间后弹出一个登录框,页面每隔一段时间发送异步请求获取最新数据等,本文文章通过代码示例给大家介绍javascript中SetInterval与setTimeout的定时器用法
    2015-08-08
  • js+css实现回到顶部按钮(back to top)

    js+css实现回到顶部按钮(back to top)

    这篇文章主要为大家详细介绍了js+css实现回到顶部按钮back to top回到顶部按钮,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • 解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题

    解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题

    今天小编就为大家分享一篇解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • webpack使用Symbol.toStringTag(Symbol.toStringTag用法)

    webpack使用Symbol.toStringTag(Symbol.toStringTag用法)

    Symbol.toStringTag是一个内置 symbol,它通常作为对象的属性键使用,对应的属性值应该为字符串类型,这个字符串用来表示该对象的自定义类型标签,这篇文章主要介绍了webpack使用Symbol.toStringTag(Symbol.toStringTag用法),需要的朋友可以参考下
    2024-02-02
  • js实现网页定位导航功能

    js实现网页定位导航功能

    这篇文章主要为大家详细介绍了js实现网页定位导航功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • javascript实现时间格式输出FormatDate函数

    javascript实现时间格式输出FormatDate函数

    这篇文章主要介绍了javascript实现时间格式输出FormatDate函数,可实现fmt标签一样对日期时间型内容格式输入的功能,是非常实用的技巧,需要的朋友可以参考下
    2015-01-01
  • ES6知识点整理之函数数组参数的默认值及其解构应用示例

    ES6知识点整理之函数数组参数的默认值及其解构应用示例

    这篇文章主要介绍了ES6知识点整理之函数数组参数的默认值及其解构应用,结合实例形式分析了ES6函数数组参数解构赋值和默认值的设置相关操作技巧,需要的朋友可以参考下
    2019-04-04
  • echarts中在柱状图上方显示文字的示例代码

    echarts中在柱状图上方显示文字的示例代码

    这篇文章给大家介绍了在echarts中如何在柱状图上方显示文字,文中给出了完整的示例代码,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-01-01
  • JS、jQuery中select的用法详解

    JS、jQuery中select的用法详解

    这篇文章主要介绍了JS、jQuery中select的用法详解的相关资料,需要的朋友可以参考下
    2016-04-04

最新评论