马黑黑 发表于 2026-8-21 12:50

JS ?? 和 ||

<style>
    .artBox { margin: 20px auto; font: normal 18px/26px sans-serif; }
    .artBox mark { padding: 0 6px; background: rgba(0,100,100,0.35); }
    .artBox p { margin: 12px 0; }
</style>

<div class="artBox">
    <p>在 JavaScript，双问号 <mark>??</mark> 是<b>空值合并运算符</b>，双竖杠 <mark>||</mark> 是<b>逻辑或运算符</b>，<mark>OR</mark>。二者同属于<b>逻辑运算符</b>，语法结构一致：</p>
   
    <div class="hEdiv"><pre class="hEpre">
function sayHi(user) {
    return `Hi ${user ?? '某某'}！`;
}

function sayHello(user) {
    return `Hello ${user || '某某'}！`;
}

console.log(sayHi()); // -&gt; Hi 某某！
console.log(sayHi('李四')); // -&gt; Hi 李四！
console.log(sayHello()); // -&gt; Hello 某某！
console.log(sayHello('李四')); // -&gt; Hello 李四！
    </pre></div>
   
    <p>上例的两个函数：</p>
    <p>其一：<mark>sayHi(user)</mark> 返回一个问候语，如果参数 user 调用者按预期传值（字符串值或能转为字符串的值），则使用双问号 <mark>??</mark> 前的 user 作为问候对象，如果不传值或所传值为 <mark>null/undefined</mark>，问候对象就用“某某”代替。换言之，空值合并运算符 <mark>??</mark> 之前的值若已定义，用它，若值未定义，即为 null 或 undefined 则用“某某”代替。再换言之，函数 sayHi(user) 的 return 语句通过双问号空值合并运算符将两种可能合并成一个值，要么是传参值，要么是“某某”。再体会以下不同形式的 sayHi 调用：</p>
   
    <div class="hEdiv"><pre class="hEpre">
// 空值属于已定义
console.log(sayHi('')); // -> Hi ！

// true/false属于已定义
console.log(sayHi(true)); // -> Hi true！
console.log(sayHi(false)); // -> Hi false！

// null未定义
console.log(sayHi(null)); // -> Hi 某某！

// undefined 未定义
console.log(sayHi(undefined)); // -> Hi 某某！
    </pre></div>
   
    <p>其二：<mark>sayHello(user)</mark> 函数，return 语句语法结构和双问号的一致。作为逻辑或运算符，双竖杠工作机制是，若 user 不为空（''）、不为 0、不为假（false）、不为未定义（null和undefined）就用它，否则用“某某”。体会更多的 sayHello 调用：</p>
   
    <div class="hEdiv"><pre class="hEpre">
// 0
console.log(sayHello(0)); // -> Hello 某某！

// 非 0
console.log(sayHello(2)); // -> Hello 2！
console.log(sayHello(-0.5)); // -> Hello -0.5！

// 空值
console.log(sayHello('')); // -> Hello 某某！

// 空格值
console.log(sayHello(' ')); // -> Hello ！

// true/false
console.log(sayHello(true)); // -> Hello true！
console.log(sayHello(false)); // -> Hello 某某！

// null/undefined
console.log(sayHello(null)); // -> Hello 某某！
console.log(sayHello(undefined)); // -> Hello 某某！
    </pre></div>
   
    <p>总而言之，双问号和双竖杠运算符都是逻辑运算符，二者语法结构相同，用于确定变量赋值（符号前的值合规，用它，反之用符号后给定的预设值）；具体用法在规范上不尽相同，主要区别是，双问号前的值只要不是 null 或 undefined 就用它，反之就用后面设定的值；双竖杠管的宽一些，前面的值包含 ''、0、false、null、undefined 等，是这些值中的任意一个，就取 <mark>||</mark> 右侧预定义的值，否则取符号左侧的值。依此，现实应用中应灵活选用<b>空值合并运算符</b>或<b>逻辑或运算符</b>。</p>
</div>

<script type="module">
    import hl from 'https://638183.freep.cn/638183/web/js/hl.js';
    const divs = document.querySelectorAll('.hEdiv');
    const pres = document.querySelectorAll('.hEpre');
    divs.forEach((div,idx) => hl.hl(div, pres));
   
// 以下测试
function sayHi(user) {
    return `Hi ${user ?? '某某'}！`;
}

console.log(sayHi('')); // -> Hi ！

</script>

梦江南 发表于 2026-8-21 17:49

谢谢黑黑老师辛苦，学习了。{:4_187:}

霜染枫丹 发表于 2026-8-21 20:27

马老师晚上好~~

看不懂，{:4_173:}那就键盘支持，祝您秋安！{:4_204:}{:4_190:}

马黑黑 发表于 2026-8-21 23:11

梦江南 发表于 2026-8-21 17:49
谢谢黑黑老师辛苦，学习了。

{:4_190:}

马黑黑 发表于 2026-8-21 23:12

霜染枫丹 发表于 2026-8-21 20:27
马老师晚上好~~

看不懂，那就键盘支持，祝您秋安！

{:4_190:}

红影 发表于 2026-8-22 08:42

这两个运算符的差别很小，只要记住差别之处，就能灵活运用了。
感谢黑黑的好帖，辛苦了{:4_187:}

马黑黑 发表于 2026-8-22 18:12

红影 发表于 2026-8-22 08:42
这两个运算符的差别很小，只要记住差别之处，就能灵活运用了。
感谢黑黑的好帖，辛苦了

差别不小，很大。

实际应用场景中，当需要从一个变量值确定另一个变量值，选用 ?? 还是 || 视情况而定。
页: [1]
查看完整版本: JS ?? 和 ||