混同しないでください?? || 付きJavaScript で: それぞれの違いは次のとおりです!

??対 || JavaScript で: あまり知られていない違い

導入

JavaScript には、コード内の未定義または null 値を処理するためのいくつかの方法が用意されています。この目的で使用される 2 つの一般的な演算子は、ヌル合体演算子 (??) と 論理 OR 演算子 (||) です。これらの演算子は一見すると似ているように見えますが、特定の状況では動作が大きく異なる場合があります。これら 2 つの演算子の違いを理解することは、より正確でバグのないコードを書きたい初心者にとっては特に重要です。

このガイドでは、?? の違いについて説明します。そして || JavaScript では、例を使って段階的に説明しているので、ゼロからヒーローまですぐに進むことができます。

Nullish Coalescing Operator (??) とは何ですか?

ヌル合体演算子 ?? null または 未定義 を処理するときにフォールバック値を提供するために使用されます。値が null か未定義かどうかのみをチェックし、そうである場合は、提供されたフォールバック値を返します。

構文:

let result = value ?? fallbackValue;

この式では、値が null または未定義の場合、fallbackValue が返されます。

例 1: Nullish Coalescing Operator の使用 (??)

let name = null;
let defaultName = name ?? 'John Doe';

console.log(defaultName); // Output: 'John Doe'

この例では、name が null であるため、defaultName にはフォールバックとして「John Doe」が割り当てられます。

重要なポイント:

• ?? null または未定義をチェックします。
• NOT null または 未定義 の場合は左側の値を返し、それ以外の場合は右側のフォールバックを返します。

論理和演算子 (||) とは何ですか?

論理 OR 演算子 ||はフォールバック値に使用される別の演算子ですが、動作が異なります。式の左側が falsy 値であるかどうかをチェックします。 JavaScript では、偽の値には、null、未定義、false、0、NaN、および '' (空の文字列) が含まれます。

構文:

let result = value || fallbackValue;

値が false の場合、fallbackValue が返されます。

例 2: 論理和演算子 (||) の使用

let age = 0;
let defaultAge = age || 18;

console.log(defaultAge); // Output: 18

この場合、年齢は 0 であり、これは誤った値であるため、defaultAge には 18 が割り当てられます。

重要なポイント:

• ||不正な値がないかチェックします。
• 左側の値が false の場合は、右側のフォールバック値を返します。

の主な違いは??そして ||

一見すると、??そして ||フォールバック値を提供するという同じ目的を果たしているように見えますが、重要な違いがあります。

• ??演算子は null または未定義のみをチェックします。
• ||演算子は、不正な値がないかチェックします。

この微妙な違いは、0、''、または false などの誤っているが有効な値を扱う場合に重要になります。

例 3: ??対 ||虚偽の値を含む

let result = value ?? fallbackValue;

ここで、count は 0 です。これは有効な値ですが、JavaScript では誤りです。

• ?? を使用すると、0 は null でも未定義でもないため、defaultCount1 は 0 を保持します。
• 0 は偽の値であるため、|| を使用すると、defaultCount2 は 10 になります。

いつ使用するべきですか??それとも||?

どちらを選択しますか??そして ||必要な特定の動作によって異なります。

使用 ？？いつ：

• 0、false、'' などの偽の値に影響を与えずに、null または 未定義 値を具体的に処理したいと考えています。
• 0 (有効なカウント) や '' (有効な空の文字列) など、有効な false 値を保持する必要があります。

例:

let name = null;
let defaultName = name ?? 'John Doe';

console.log(defaultName); // Output: 'John Doe'

この例では、空の文字列 '' は有効なユーザー入力であるため、 ??フォールバックに置き換えずに通過できるようにします。

|| を使用します。いつ：

• すべての偽の値 (0、false、NaN、''、未定義な​​ど) をフォールバック値が必要なものとして扱いたいとします。
• 0 や false などの値を置き換えても問題ありません。

例:

let result = value || fallbackValue;

ここでは、false は false として扱われ、フォールバック「ログインしていません」が使用されます。

よくある落とし穴とその回避方法

違いが分かったところで、初心者がよく犯すよくある間違いとその回避方法をいくつか見てみましょう。

間違い 1: || を使用する有効な誤った値の場合

let age = 0;
let defaultAge = age || 18;

console.log(defaultAge); // Output: 18

問題: スコアとして 0 を表示したかったのですが、 || 0 は誤りであるため、「スコアなし」に置き換えられました。

解決策: ?? を使用します。 0 の通過を許可します。

let count = 0;
let defaultCount1 = count ?? 10; // Using nullish coalescing
let defaultCount2 = count || 10; // Using logical OR

console.log(defaultCount1); // Output: 0
console.log(defaultCount2); // Output: 10

間違い 2: Nullish Coalescing の誤解

let userInput = '';
let fallbackInput = userInput ?? 'default input';

console.log(fallbackInput); // Output: ''

説明: userPreference が null であるため、フォールバック false が使用されます。これは ??.

の正しい動作です。

よくある質問

使ってもいいですか？？そして ||一緒に？

はい、必要に応じて、同じ式の異なる部分で両方の演算子を使用できます。

例:

let isLoggedIn = false;
let loginStatus = isLoggedIn || 'Not logged in';

console.log(loginStatus); // Output: 'Not logged in'

これは最初に ?? を使用して null または未定義をチェックします。次に || を使用して他の不正な値がないかチェックします。

Nullish Coalescing Operator はすべてのブラウザでサポートされていますか?

??演算子は最新のブラウザでサポートされていますが、古い環境では、Babel などのトランスパイラを使用する必要がある場合があります。

各オペレーターのユースケースは何ですか?

• 使用?? null または未定義を特に気にする場合。
• 使用 ||偽の値を処理したい場合。

そうですか？他の誤った値を使用しますか?

いいえ、?? null と未定義のみをチェックし、false、0、'' などの他の誤った値はチェックしません。

結論

?? の違いを理解していますか？そして || JavaScript では、堅牢でエラーのないコードを作成するために重要です。どちらの演算子もフォールバック値の提供には役立ちますが、偽の値の処理に関しては動作が異なります。使用 ？？ null または未定義をチェックする必要がある場合は、 || を使用します。不正な値がないかチェックしたい場合。

これらの演算子をマスターすると、意図したとおりに動作する、より柔軟で正確なコードを作成できるようになります。

以上が混同しないでください?? || 付きJavaScript で: それぞれの違いは次のとおりです!の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。