ホームページ > ウェブフロントエンド > jsチュートリアル > クイックヒント:javascriptで三元演算子の使用方法

クイックヒント:javascriptで三元演算子の使用方法

Jennifer Aniston
リリース: 2025-02-09 08:38:20
オリジナル
487 人が閲覧しました

Quick Tip: How to Use the Ternary Operator in JavaScript

このチュートリアルでは、javaScript三元演算子の構文と一般的な使用法を詳細に調べます。

javascriptテルナリー演算子(条件演算子とも呼ばれます)は、

ステートメントの代わりにインライン条件チェックを実行するために使用されます。コードをより簡潔で読みやすくし、変数に値を割り当てたり、条件に基づいて式を実行したりできます。 if...else

キーポイント

    JavaScript Ternaryオペレーターでは、インラインの条件付きチェックを可能にし、コードを短くて読みやすくします。 3つのオペランドを受け入れます。テストする条件と、コロンで区切られた2つの式です。条件が真である場合、最初の式が実行されます。
  • 3成分演算子を使用して、値を割り当て、条件に基づいて式を実行し、変数がnullまたは未定義であるかどうかを確認できます。また、
  • ステートメントと同様に、条件をネストまたはリンクすることにより、オペレーターの表現の複数の条件を処理できます。 if…else if…else
  • 3成分演算子は、長い
  • ステートメントを置き換えることでコードの読みやすさを向上させることができますが、ネストされた三元演算子を過度に使用すると、コードの読み取りが難しくなります。また、三元演算子には真の偽の枝が必要であることにも注意する必要があります。 if…else

grammar

3つのオペランドは、JavaScriptの唯一のオペレーターです。テストする条件を提供し、その後の疑問符が続き、その後にコロンで区切られた2つの式が続きます。条件が真の値と見なされる場合、最初の式が実行される場合、条件は誤った値と見なされます。

その使用の形式は次のとおりです

ここで、
condition ? expr1 : expr2
ログイン後にコピー
ログイン後にコピー
はテストする条件です。その値が真である場合、

が実行されます。それ以外の場合、その値が虚偽の値である場合、conditionが実行されます。 expr1 expr2

および

は、あらゆる種類の表現にすることができます。それらは、変数、関数呼び出し、または他の条件でさえあります。 expr1 expr2例:

1 > 2 ? console.log("You are right") : console.log('You are wrong');
ログイン後にコピー
ログイン後にコピー
値割り当てには、三元演算子を使用します

三元演算子の最も一般的なユースケースの1つは、変数に値を割り当てる値を決定することです。通常、変数の値は、別の変数または条件の値に依存します。

これは

ステートメントを使用して達成できますが、これにより、コードの読み取りが長くなり、難しくなります。たとえば、

if...else このコードの例では、最初に変数

を定義します。次に、
const numbers = [1,2,3];
let message;
if (numbers.length > 2) {
  message = 'The numbers array is too long';
} else {
  message = 'The numbers array is short';
}

console.log(message); // "The numbers array is too long"
ログイン後にコピー
ログイン後にコピー
ステートメントを使用して、変数の値を決定します。

messageこれは、三元演算子を使用して単純に1行で実行できます。 if...else

三元演算子を使用して式を実行します

const numbers = [1,2,3];
let message = numbers.length > 2 ? 'The numbers array is too long' : 'The numbers array is short';

console.log(message); // "The numbers array is too long"
ログイン後にコピー
ログイン後にコピー

3成分演算子を使用して、あらゆる種類の式を実行できます。 たとえば、変数の値に基づいて実行する機能を決定する場合は、ステートメントを使用してこれを行うことができます。

これは、三元演算子を使用して1行で実行できます。

condition ? expr1 : expr2
ログイン後にコピー
ログイン後にコピー

feedbackの値が「はい」の場合、sayThankYou関数が呼び出されて実行されます。それ以外の場合、saySorry関数が呼び出されて実行されます。

null値チェックには、三元演算子を使用してください

多くの場合、ユーザーから検索結果を入力した場合、またはサーバーからデータを取得する場合、値を定義している場合としない変数に取り組んでいる可能性があります。

三元演算子を使用して、変数名を条件付きオペランドに配置することにより、変数がnullまたは未定義でないかどうかを確認できます。

これは、変数がオブジェクトである場合に特に便利です。実際にヌルまたは未定義のオブジェクトのプロパティにアクセスしようとすると、エラーが発生します。最初にオブジェクトが設定されているかどうかを確認すると、エラーを回避できます。

例:

1 > 2 ? console.log("You are right") : console.log('You are wrong');
ログイン後にコピー
ログイン後にコピー
このコードブロックの最初の部分では、

には2つのプロパティ(bookname)を持つオブジェクトがあります。三元演算子をauthorに使用する場合、nullまたは未定義でないかどうかをチェックします。そうでない場合 - つまり、値があることを意味します - bookプロパティにアクセスして、コンソールにログに記録します。それ以外の場合、それがnullの場合、代わりにコンソールに「No Book」を記録します。 name

はヌルではないため、本のタイトルはコンソールに録音されます。ただし、2番目の部分では、同じ条件が適用されると、bookがnullであるため、三元演算子の条件が失敗します。したがって、「No Book」はコンソールに記録されます。 book

ネスティング条件

三元演算子はインラインに使用されますが、複数の条件を三元演算子式の一部として使用できます。複数の条件をネストまたはリンクして、

ステートメントと同様の条件チェックを実行できます。 if...else if...else たとえば、変数の値は複数の条件に依存する場合があります。

を使用して、

を達成できます if...else if...else このコードブロックでは、変数の文字レベルを決定するために

変数で複数の条件をテストします。
const numbers = [1,2,3];
let message;
if (numbers.length > 2) {
  message = 'The numbers array is too long';
} else {
  message = 'The numbers array is short';
}

console.log(message); // "The numbers array is too long"
ログイン後にコピー
ログイン後にコピー
以下に示すように、同じ条件を3成分演算子を使用して実行できます。

score最初の条件、つまり

を評価します。

これは、すべての条件が偽になるまで続きます。つまり、

の値は「f」であるか、条件の1つが真であると評価され、その真の値が
const numbers = [1,2,3];
let message = numbers.length > 2 ? 'The numbers array is too long' : 'The numbers array is short';

console.log(message); // "The numbers array is too long"
ログイン後にコピー
ログイン後にコピー
に割り当てられます。

score >= 90

結論

grade このチュートリアルの例に示されているように、JavaScript次元演算子には多くのユースケースがあります。多くの場合、verbose gradeステートメントを置き換えることにより、三元演算子はコードの読みやすさを向上させることができます。

(FAQパーツなどの後続のコンテンツは、記事の長さのために必要に応じて個別に処理することをお勧めします。)

以上がクイックヒント:javascriptで三元演算子の使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート