JavaScript のヌル合体演算子「??」

このブログでは、JavaScript のヌル合体演算子 ?? について調べます。これを論理 OR 演算子 || と比較し、その優先順位について説明し、その使用法を理解するのに役立つ実践的な例を示します。飛び込んでみましょう!

ヌル合体演算子??

ヌル合体演算子 ?? は、null または 未定義 を処理するときにデフォルト値を提供するために使用されます。左側のオペランドが null または 未定義 の場合、右側のオペランドを返します。それ以外の場合は、左側のオペランドを返します。

構文:

result = value1 ?? value2;

例:

let user = null;
let defaultUser = "Guest";

let currentUser = user ?? defaultUser;
console.log(currentUser); // Output: "Guest"

説明:

• ユーザー はnullです。
• ?? 演算子は、defaultUser を返します。これは、user が null であるためです。

との比較||

論理 OR 演算子 || は、最初に見つかった真の値を返します。これは、左側のオペランドが false (false、0、""、null、未定義、NaN).

例:

let user = "";
let defaultUser = "Guest";

let currentUser = user || defaultUser;
console.log(currentUser); // Output: "Guest"

説明:

• user は空の文字列 "" (偽) です。
• || 演算子は、user が false であるため、defaultUser を返します。

主な違い

• ??:nullと未定義のみを偽の値とみなします。
• ||: すべての偽の値を考慮します (false、0、""、null、)未定義、NaN).

例:

let user = 0;
let defaultUser = "Guest";

let currentUser1 = user ?? defaultUser;
let currentUser2 = user || defaultUser;

console.log(currentUser1); // Output: 0
console.log(currentUser2); // Output: "Guest"

説明:

• ユーザーは0です(||の場合は誤りですが、??の場合は誤りです)。
• ?? 演算子は、0 を返します。ユーザー が null または 未定義 ではないためです。
• || 演算子は、ユーザー が誤っているため、"Guest" を返します。

優先

?? は、論理 OR 演算子 || を含む他のほとんどの演算子よりも優先順位が低くなります。これは、?? を含む式は、||. を含む式の後に評価されることを意味します。

例:

let a = null;
let b = false;
let c = "Hello";

let result1 = a ?? b || c;
let result2 = a || b ?? c;

console.log(result1); // Output: "Hello"
console.log(result2); // Output: "Hello"

説明:

• あれ?? aはnullであり、bはfalseであるため、bはfalseを返します。
• 偽 || falseは偽であり、cは真実であるため、cは「Hello」を返します。
• a || aはnullであり、bはfalseであるため、bはfalseを返します。
• 偽 ?? c は、"Hello" を返します。false が null または 未定義 ではないためです。

実践的な例

使用?? デフォルト値の場合

function getUserName(user) {
  return user.name ?? "Guest";
}

let user1 = { name: "Alice" };
let user2 = { age: 25 };

console.log(getUserName(user1)); // Output: "Alice"
console.log(getUserName(user2)); // Output: "Guest"

説明:

• user.nameがnullまたは未定義の場合、??演算子は"Guest"を返します。 .

使用中|| デフォルト値の場合

function getUserName(user) {
  return user.name || "Guest";
}

let user1 = { name: "" };
let user2 = { age: 25 };

console.log(getUserName(user1)); // Output: "Guest"
console.log(getUserName(user2)); // Output: "Guest"

説明:

• user.name が誤っている場合 (例: "")、|| 演算子は "Guest" を返します。

概要

• ?? (Nullish Coalescing Operator): 左側のオペランドが null または 未定義 の場合、右側のオペランドを返します。
• || (論理和演算子): 最初に見つかった真の値を返します。
• 優先順位: ?? 演算子は、|| 演算子よりも優先順位が低くなります。

結論

ヌル合体演算子 ?? は、null または 未定義 を処理するときにデフォルト値を提供するための JavaScript の強力なツールです。論理 OR 演算子 || との違いとその優先順位を理解することで、より堅牢でエラーのないコードを作成できるようになります。練習と探索を続けて、JavaScript のヌル結合演算子についての理解を深めてください。

JavaScript に関するさらに詳しいブログにご期待ください!コーディングを楽しんでください!

以上がJavaScript のヌル合体演算子「??」の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。