どのように使用しますか?:JavaScriptの(条件付き)演算子?


434

?:(条件付き、「3項」)演算子とは何か、およびその使用方法を簡単な言葉で誰かに説明してもらえますか?


2
それらは演算子です。オペランドは、これらの演算子で使用する値です。
BoltClock

7
面白い事実:一部の言語(つまりGroovy)には、実際にはオペランドがあり?:ます(あなたが書いたとおり、間にステートメントはありません)-Elvis演算子。かなり賢い。
Rob Hruska、2011年


3
記号をグーグルにすることは問題になる可能性がありますが、「Javascript演算子」をグーグルする(そしてそれらすべてを学ぶ)ことはどうでしょうか?
nnnnnn

回答:


644

これは、if-elseステートメントの1行の省略形です。これは条件演算子と呼ばれます。1

次に、条件演算子を使用して短縮できるコードの例を示します。

var userType;
if (userIsYoungerThan18) {
  userType = "Minor";
} else {
  userType = "Adult";
}

if (userIsYoungerThan21) {
  serveDrink("Grape Juice");
} else {
  serveDrink("Wine");
}

これは次のように短縮できます?:

var userType = userIsYoungerThan18 ? "Minor" : "Adult";

serveDrink(userIsYoungerThan21 ? "Grape Juice" : "Wine");

すべての式と同様に、条件演算子は副作用のあるスタンドアロンステートメントとしても使用できますが、これは縮小の外では珍しいことです。

userIsYoungerThan21 ? serveGrapeJuice() : serveWine();

連鎖させることもできます:

serveDrink(userIsYoungerThan4 ? 'Milk' : userIsYoungerThan21 ? 'Grape Juice' : 'Wine');

ただし、注意してください。そうしないと、次のような複雑なコードになります。

var k = a ? (b ? (c ? d : e) : (d ? e : f)) : f ? (g ? h : i) : j;

1は、 多くの場合「三項演算子」と呼ばれるが、実際にはそれだけだ三項演算子[3つのオペランドを受け入れる演算子]。ただし、現在JavaScriptが持っているのはこれだけです。


56
名前を明確にするために:ternaryは演算子のタイプです(つまり、3つの部分に分かれています)。名前、その特定の三項演算子ですconditional operator。JSには三項演算子が1つしかないので、用語が誤用されます。
2014年

1
@tryingToGetProgrammingStraightの3値形式は技術的には式であり、式には他の式を含めて式ツリーを形成できます。このコードは、式ツリーがどのように見えるかを示しています:)参照:fsharpforfunandprofit.com/posts/expressions-vs-statements
Alexander Troup

1
オペレーターの乱用として頻繁に引用される副作用のユースケースではなく、一般的なユースケースの例を更新することを強くお勧めします。
TJクラウダー2016

7
なぜ一番下に文法の言い回しがあるのか​​わかりませんが、それは正しくありません。javascriptに演算子のタイプが1つしかない場合は、3項演算子ではなく、3項演算子と言うのが間違いなく正しいです。ばかげて、ただTHEを使うだけで、それがすべてを意味します。
Andrew

1
@MarkCarpenterJr JavaScriptでは||、左側の値が真である場合に短絡するため、これを行う一般的な方法は演算子を使用します。
Peter Olson

142

与えられた答えにいくつか追加したいと思います。

「設定されている場合は変数を表示し、それ以外は...」のような状況で3項に遭遇した(または使用したい)場合は、3項なしでさらに短くすることができます。


の代わりに:

var welcomeMessage  = 'Hello ' + (username ? username : 'guest');

以下を使用できます。

var welcomeMessage  = 'Hello ' + (username || 'guest');

これは、PHPの簡易3項演算子と同等のJavascriptです。 ?:

あるいは:

var welcomeMessage  = 'Hello ' + (username || something || maybethis || 'guest');

変数を評価し、それがfalseまたは設定されていない場合は、次に進みます。


4
私は三元論と格闘していましたが、最終的にこの答えを見つけました。ありがとうございました!
Ljubisa Livac

私がいた場合には三項演算子の周りにカッコを使用しない 'Hello ' + (username ? username : 'guest')Hello + 無視され、ちょうど三項演算の結果が返された場合。なぜ誰かが説明できますか?
シバ

2
brackesなし@Shiva、それはevalutes 全体の左部分を:'Hello ' + username、常にあるtrue、それは0よりも大きい長さを持つ文字列だから
ジェフリー・ローゼンダール

26

これは、「三項」または「条件付き」演算子と呼ばれます。

?:演算子は、if ... elseステートメントのショートカットとして使用できます。これは通常、if ... elseステートメントが扱いにくい場合に、より大きな式の一部として使用されます。例えば:

var now = new Date();
var greeting = "Good" + ((now.getHours() > 17) ? " evening." : " day.");

この例では、「こんばんは」という文字列を作成します。午後6時以降の場合。if ... elseステートメントを使用する同等のコードは次のようになります。

var now = new Date();
var greeting = "Good";
if (now.getHours() > 17)
   greeting += " evening.";
else
   greeting += " day.";

MSDN JSドキュメントから。

基本的には、これは簡単な条件文です。

こちらもご覧ください:


5
実際には条件演算子と呼ばれています。
ChaosPandion 2011年

5
その三項条件演算子
Petah

4
@Michael-仕様のセクション11.12条件演算子(?:)を参照してください:ecma-international.org/publications/files/ECMA-ST/ECMA-262.pdf
ChaosPandion

7
人々はまだこのことについて議論していますか?もう。
BoltClock

7
@BoltClock-正確に議論するのではなく、単に私たちの本質的な語彙を正規化しようとしています。
ChaosPandion 2011年

21

あなたが持っているすべてがシンボルである場合、グーグルするのは少し難しいです;)使用する用語は「JavaScript条件演算子」です。

JavaScriptでさらに面白い記号が見つかった場合は、まずJavaScriptの演算子を検索してみてください。MDCの演算子リストです。あなたが遭遇する可能性が高い唯一の例外は$シンボルです。

あなたの質問に答えるために、条件演算子は単純なifステートメントを置き換えます。例が最適です:

var insurancePremium = age > 21 ? 100 : 200;

の代わりに:

var insurancePremium;

if (age > 21) {
    insurancePremium = 100;
} else {
    insurancePremium = 200;
}

良い説明ですが、ブール式の結果に応じてブール値を割り当てるため、この例は不十分です。これはほとんど意味がありません。var olderThan20 = age > 20;代わりに使用したいです。
BalusC、2011年

@BalusC-はい:)私はそれに気づきましたが、例は私の帽子から引き出すのが難しいです!より良いものを考えます...
David Tang


7

答えのほとんどは正しいですが、もう少し追加したいと思います。三項演算子は、それができることを意味しており、右結合で連鎖し、次のようにif … else-if … else-if … else

function example() {
    return condition1 ? value1
         : condition2 ? value2
         : condition3 ? value3
         : value4;
}

に相当:

function example() {
    if (condition1) { return value1; }
    else if (condition2) { return value2; }
    else if (condition3) { return value3; }
    else { return value4; }
}

詳細はこちら


1
これは私が探しているものです。
Sazal Das


6

三項演算子

通常、JavaScriptには条件文があります。

例:

if (true) {
    console.log(1)
} 
else {
    console.log(0)
}
# Answer
# 1

ただし、2行以上含まれており、変数に割り当てることはできません。JavaScriptには、この問題の3 項演算子の解決策があります。三項演算子は、1行で記述して変数に割り当てることができます。

例:

var operator = true ? 1 : 0
console.log(operator)
# Answer
# 1

この三項演算子は、Cプログラミング言語で類似しています。


5

ヘイメイトは、jsがtrueまたはfalseのいずれかに評価することで機能することを覚えていますか?

三項演算子を見てみましょう:

questionAnswered ? "Awesome!" : "damn" ;

まず、questionAnsweredがあるかどうかのjsをチェックしtrueたりfalse

もし true?あなたが得るだろう)「すごいです!」

そうしないと ( :)は「くそー」になります。

これが友人に役立つことを願っています:)


2

それは if statement 1行にすべて。

そう

var x=1;
(x == 1) ? y="true" : y="false";
alert(y);

評価される式は、 ( )

trueに一致する場合は、 ?

falseと一致する場合は、 :


var x = 1; y =(x == 1)?真/偽;
8

2
x = 9
y = 8

単項

++x
--x

バイナリ

z = x + y

ターナリー

2>3 ? true : false;
2<3 ? true : false;
2<3 ? "2 is lesser than 3" : "2 is greater than 3";

1

それはと呼ばれていternary operatorます。詳細については、これに関して私が回答した別の質問があります。

「else」なしでIF elseステートメントを作成する方法


4
実際、3項は演算子のタイプです(つまり、3つの部分があります)。名前、その特定の三項演算子ですconditional operator。JSには三項演算子が1つしかないので、用語が誤用されます。
コーディング終了

1

これはおそらく、これを行う最もエレガントな方法ではありません。しかし、3項演算子に慣れていない人にとっては、これは役立つかもしれません。私の個人的な好みは、条件ブロックの代わりに1行のフォールバックを行うことです。

  // var firstName = 'John'; // Undefined
  var lastName = 'Doe';

  // if lastName or firstName is undefined, false, null or empty => fallback to empty string
  lastName = lastName || '';
  firstName = firstName || '';

  var displayName = '';

  // if lastName (or firstName) is undefined, false, null or empty
  // displayName equals 'John' OR 'Doe'

  // if lastName and firstName are not empty
  // a space is inserted between the names
  displayName = (!lastName || !firstName) ? firstName + lastName : firstName + ' ' + lastName;


  // if display name is undefined, false, null or empty => fallback to 'Unnamed'
  displayName = displayName || 'Unnamed';

  console.log(displayName);

三項演算子


1

次の例のように、長さだけでなくJqueryでも使用できます。

値があり、firstnameとlastnameを取得するGuarantorNameテキストボックスがあるとします。nullの場合もあります。だからラタール

        var gnamesplit = $("#txtGuarantorName").val().split(" ");
        var gLastName = "";
        var gFirstName = "";
        if(gnamesplit.length > 0 ){
           gLastName  = gnamesplit[0];        
        }
        if(gnamesplit.length > 1 ){
           gFirstName = gnamesplit[1];        
        }

最小限のコードでJqueryを使用して以下のコードを使用できます

    

    var gnamesplit = $("#txtGuarantorName").val().split(" ");
    var gLastName = gnamesplit.length > 0  ? gnamesplit[0] : "";
    var gFirstName =  gnamesplit.length > 1  ? gnamesplit[1] : "";
    $("#txtLastName").val(gLastName);
    $("#txtFirstName").val(gFirstName);
    
    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div >
  Guarantor Name: <input type="text" id="txtGuarantorName" value="ASP.NET Core"  /><br/>
  <br/>
  <br/>
  
  First Name: <input type="text" id="txtLastName" value="ASP.NET Core"  />
  Last Name: <input type="text" id="txtFirstName" value="ASP.NET Core"  />
</div>


1

三項式は、JS、特にReactで非常に役立ちます。ここに、提供された多くの優れた詳細な質問に対する簡単な答えがあります。

condition ? expressionIfTrue : expressionIfFalse

expressionIfTrueOG ifステートメントがtrueになると考えてください。elseステートメント
と考えてexpressionIfFalseください。

例:

var x = 1;
(x == 1) ? y=x : y=z;

これはxの値をチェックし、最初のy =(value)がtrueの場合に返され、2番目のコロンの後に戻ります:falseの場合y =(value)を返しました。


0

条件付き(3項)演算子は、3つのオペランドを取る唯一のJavaScript演算子です。この演算子は、ifステートメントのショートカットとしてよく使用されます。

condition ? expr1 : expr2 

条件が真の場合、演算子はexpr1の値を返します。それ以外の場合は、expr2の値を返します。

function fact(n) {
  if (n > 1) {
    return n * fact(n-1);
  } else {
    return 1;
  }
  // we can replace the above code in a single line of code as below
  //return (n != 1) ? n * fact(n - 1) : 1;
}
console.log(fact(5));

詳細については、MDNドキュメントのリンクをご覧ください。


0

JavaScriptに 1つの条件チェックインスタンス関数がある場合。三項演算子を使用するのは簡単です。実装するのに必要なのは1行だけです。例:

    private module : string ='';
    private page:boolean = false;
    async mounted(){
     if(this.module=== 'Main')
    {
    this.page = true;}
    else{
    this.page = false;
    }
}

このような1つの条件を持つ関数は、次のように書くことができます。

this.page = this.module=== 'Main' ?true:false;

状態 ?Trueの場合:Falseの場合


-3
 (sunday == 'True') ? sun="<span class='label label-success'>S</span>" : sun="<span class='label label-danger'>S</span>";

 sun = "<span class='label " + ((sunday === 'True' ? 'label-success' : 'label-danger') + "'>S</span>"

三項演算子でもhtmlを追加できます
Chandrashekhar Komati 2017年

これは、3値代入を記述し、===ではなく==を使用する方法とはsunday ?sun = "<span class='label " + ((sunday === 'True' ? 'label-success' : 'label-danger') + "'>S</span>"
まったく異なり

条件付き3項の要点は、条件付き代入値を短くすることです。それ以外の場合は、ifステートメントを使用するだけです
TheRealMrCrowley

これが正しいかどうか教えてください。あなたは間違っていると言うならば、まだこれが働いていると私は私のプロジェクトを使用しています...
チャンドラシェックハーコマチ

最初の例ではそれがどのように機能するかはわかっていますが、2番目のバージョンとして提供したものと同じです。私があなたに与えたものと比較して、トップバージョンにどれほど多くの不必要な重複があることに注意してください。JSはブラウザに送信されるコードなので、コードの長さが重要です
TheRealMrCrowley
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.