JS の三項演算子: 知っておくべきことすべて

ターナリーとは何ですか？

三項演算子は、2015 年 7 月からブラウザー全体で利用できる JavaScript 演算子です。これは、if/else ステートメントの省略表現です。この演算子は Java、C、Python などのさまざまなプログラミング言語で広く使用されていますが、この記事では JavaScript に焦点を当てます。

三項演算子の一般的な構文を確認してみましょう。

condition ? ifTrue : ifFalse

上記の例からわかるように、三項演算子は if ステートメントと else ステートメントをそれに応じて ? に置き換えます。および: 記号。クエスチョンマークの左側にある条件がチェックされます。 true の場合、? の間にある最初の式: マークが実行されます。 false の場合、: 記号の後に記述された最後の式が実行されます。

仕組みは?

三項演算子の仕組みを理解するために、通常の if/else ステートメントと比較してみましょう。
以下の Javascript コードは、条件に応じて文字列をコンソールに記録します。

let a = 10

if(a == 10){
    console.log("Variable is ten!")
}else{
    console.log("Variable is not ten!")
}

ここで、三項演算子を使用してこのコードを書き直してみましょう。

let a = 10
a == 10 ? console.log("Variable is ten!") : console.log("Variable is not ten!")

このコード ブロックの三項演算子は、意図したとおりに条件付きで文字列をログに記録します。しかし、このステートメントを書くより良い方法があります。
三項演算子は式を実行するだけでなく、値を返します。したがって、演算子を使用して 2 つの異なる console.log 式を処理する代わりに、1 つの console.log ステートメントに含まれる 2 つの異なる値を処理する方法でステートメントを作成できます。
例:

let a = 10
console.log(a == 10 ? "Variable is ten!" : "Variable is not ten!")

この行の出力は、以前に作成した他の三項式とまったく同じになります。ただし、このコードはよりコンパクトで読みやすくなっています。

三項演算子を使用して、条件付きで変数に値を割り当てることができます。通常の if/else ステートメントを使用した例を確認してから、三項を使用して再度作成してみましょう。

let a = 10
let b
if(a === 10){
    b = a * 5
}else{
    b = a * 2
}

a が 10 の場合、コード ブロックはそれに 5 を乗算し、それ以外の場合は変数に 2 を乗算し、どちらの場合も b に代入します。
三項演算子を使用した別の方法は次のようになります:

let a = 10
let b = a === 10 ? a * 5 : a * 2

ご覧のとおり、このような基本的な操作については 1 行のコードを記述する方が便利です。

入れ子になった条件

場合によっては、複数の if/else 条件を相互に使用する必要があります。三項演算子を利用して条件を連鎖させることができます。

let a = 5
if(a === 1){
    console.log("1")
}else if(a === 2){
    console.log("2")
}else{
    console.log("a is not 1 or 2")
}

上に示したこの条件の連鎖は、次のように三項演算子を使用して表すことができます。

let a = 5
console.log(a === 1 ? "1" : a === 2 ? "2" : "a is not 1 or 2")

ご想像のとおり、これは非常に面倒なことになりやすいです。そのため、複雑な条件文で三項演算子を使用する必要はありません。

React の 3 項

以前に React アプリケーションを構築したことがある場合は、おそらく条件付きレンダリングが重要なトピックであることをご存知でしょう。三項演算子を使用すると、この操作が簡単になります。 React の公式ページから例を確認してみましょう。
これはステートメントを記述する通常の方法です:

condition ? ifTrue : ifFalse

これも同じステートメントですが、三項演算子を使用しています。

let a = 10

if(a == 10){
    console.log("Variable is ten!")
}else{
    console.log("Variable is not ten!")
}

ご覧のとおり、見た目はさらに良くなりました。したがって、特に React を使用する場合には、3 項を使用してステートメントを作成する方がクリーンで優れたアプローチになる場合があります。ただし、場合によっては、三項演算子によってコードがさらに読みにくくなることがあります。

他にどのような状況で三項演算子を使用する必要があるか、あるいは使用しない必要があると思いますか?コメントであなたの考えを教えてください！

お読みいただきありがとうございます。
詳細については、これらのリンクを参照してください。

• 三項演算子の詳細: 条件付き (三項) 演算子 - MDN Web Docs
• React の条件付きレンダリングの詳細: 条件付きレンダリング - React

以上がJS の三項演算子: 知っておくべきことすべての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。