JavaScriptの三項演算子

コーディング中に自分自身を繰り返すのに疲れていますか？あなたはまだ伝統的な’if…else’ブロックを使用していますか？私があなたに言ったら、あなたは4行で15行のコードを書くことができますか？今すぐ1-800-三項演算子を呼び出します。

三項演算子は、if…else文の省略形です。これは、3つのオペランドを取るJavaScriptの唯一の条件演算子です。三項演算子の基本的な構文は、

condition?です。表現1 : 表現2

条件がテスト/評価される値である場合、
expression1は、条件がtrueの場合に実行される任意の型の値にすることができます。
expression2は、expression1がfalseの場合に実行される任意の型の値にすることができます。 “とは”if”を意味し、” : “手段”その他”

例を見てみましょう

if…elseステートメントを使用して、年齢別に運転が許可されているかどうかを判断する場合—三項演算子を使用してこの

var age = 18;if (age >= 16) {
alert("You're allowed to drive!");
}else {
alert("You should be 16 to drive!");
}// "You're allowed to drive!"

のようにこのコードブロックは、変数’age’が16以上の場合に変換され、ブラウザは’あなたは運転することが許可されています！’,ELSE’あなたは運転する16でなければなりません！”警告する必要があります！

三項式を採用するもう一つの理由は、あなたのコードのどこにでも収まる柔軟性とミニチュアサイズです。たとえば、文字列の結果を文字列に直接添付したい場合は、条件を個別に宣言することなく簡単に行うことができます。

var isMember = true;
'The fee is ' + (isMember ? '.00' : '.00'); // The fee is .00

isMemberがtrueの場合は’料金は2 2.00’、それ以外の場合は’料金は1 10.00’です。

! また、三項演算の結果を変数に割り当てることもできます。先ほど使用したのと同じ駆動例を使用してみましょう。

var age = 18;
var canDrive = (age >= 16) ? "You're allowed to drive!" : "You should be 16 to drive!";
console.log(canDrive); // "You're allowed to drive!"

この例では、結果を変数に保存し、後でコンソールに表示しました。

三項演算子には、従来のif…elseブロックと同じくらい可能な限りのものがあります。複数の三項演算子を一緒に連鎖させて、’IF…ELSE IF…ELSE”ブロックと呼ぶものを形成することができます。

var year = prompt('Which year was the 2018 World Cup?', '');
alert(year < 2018) ? 'Too early' : (year > 2018) ? 'Too late' : 'Exactly!'; // Exactly!

上記のコードブロックは、年が2018より小さい場合は翻訳され、ブラウザは’too early’警告する必要があります。

if文を入れ子にすることもできます:

var statement1 = true;
var statement2 = true;var check = statement1 ? (statement2 ? "True, Yes!" : "True, False!") : 'False';console.log(check); // True, Yes!

私たちの目はコードを垂直にスキャンし、インデントとスペースはコードを簡単に読むのに役立ちます。それらは三項では除外されず、空きスペースはコードに影響しません。

var stop = false, age = 23;
age > 18 ? (
alert('OK, you can go.')
) : (
alert('Sorry, you are much too young!')
);

上記のコードは、三項評価やif…else操作と同様に機能します。

ケースごとに複数の操作を行い、カンマで区切ることもできます。

var stop = false, age = 23;
age > 18 ? (
alert('OK, you can go.'),
location.assign('continue.html')
) : (
stop = true,
alert('Sorry, you are much too young!')
);

また、複数の操作を持つことができ、変数に値を割り当てることができます。最後のコンマ区切りの値が変数に割り当てられます。

var age = 16;
var auth = age > 18 ? (
alert('OK, you can go.'), 
// alert returns "undefined", but it will be ignored because
// isn't the last comma-separated value of the parenthesis
'APPROVED' // the value to be assigned if age > 18
) : (
alert('You are much too young!'),
alert('Sorry :-('),
// etc. etc.
'DISAPPROVE' // the value to be assigned if !(age > 18)
);
location.assign(auth); // "DISAPPROVE"

最後になりましたが、三項演算を使用して関数の値を返すことができます。たとえば、Chris PrattがMarvel Universeのメンバーであるかどうかを判断するための値を返す関数を記述する場合;

var marvel = true;function chrisPratt(marvel) {
if (marvel === true){
return "I am Star-Lord!";
}
else {
return "Have you watched Guardians of the Galaxy?";
}}
var output = chrisPratt(marvel);
console.log(output); // "I am Star-Lord!"

returnを複数回使用し、if…else文を記述し、それらの値を中括弧などに埋め込む必要があることに注意してください。しかし、三項演算子を使用して短縮することができます。上記の同じコードは、三項演算でそのように評価されます;

var marvel = true;function chrisPratt(marvel) {
return (marvel === true) ? "I am Star-Lord!" : "Have you watched Guardians of the Galaxy?";
}
var output = chrisPratt(marvel);
console.log(output); // "I am Star-Lord!"

注:三項演算で使用されるすべての変数は、演算が作成される前に定義する必要があります。

ここまで来てくれた方、ありがとうございました！

Instagramの上で私を追加すること自由に感じる

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル