web-dev-qa-db-ja.com

どうやって使うの？ ：JavaScriptの（条件付き）演算子？

誰かが簡単な言葉で私に?:（条件付き、 "三元"）演算子とそれをどのように使うのか説明してもらえますか？

javascriptternary-operator
348
muudless

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

これは条件演算子で短縮できるコードの例です。

if(userIsYoungerThan21) {
  serveGrapeJuice();
}
else {
  serveWine();
}

これは?:で短くすることができます：

userIsYoungerThan21 ? serveGrapeJuice() : serveWine();

Javascriptでは、条件演算子は単なるステートメントではなく式に評価できます。

var userType = userIsYoungerThan18 ? "Minor" : "Adult";
serveDrink(userIsYoungerThan21 ? "Grape Juice" : "Wine");

彼らは連鎖することさえできます：

userIsYoungerThan4 ? serveMilk() : userIsYoungerThan21 ? serveGrapeJuice() : serveWine();

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

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

1 しばしば「三項演算子」と呼ばれますが、実際には単なる/三元演算子（3つのオペランドを受け入れる演算子）です。それは、現時点で唯一のJavaScriptです。

529
Peter Olson

add与えられた答えにいくつかをしたい。

「設定されている場合は変数を表示し、そうでなければ...」などの状況で3進数に遭遇した（または使用したい）場合は、さらに短くすることができます進数なし。

の代わりに：

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

次を使用できます。

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

これは、PHPの略式三項演算子?:と同等のJavascriptです

あるいは：

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

変数を評価し、falseまたは未設定の場合は、次へ進みます。

119
Jeffrey Roosendaal

それは '三項'または '条件付き'演算子と呼ばれます。

例

？：演算子は、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ドキュメント から。

基本的にはそれは速記条件文です。

また見なさい：

24
Michael Robinson

あなたが持っているのがシンボルだけであるならグーグルするのは少し難しいです;）使用する用語は "javascript条件演算子"です。

Javascriptにこれ以上面白いシンボルが表示されている場合は、まずJavascriptの演算子を調べてみてください。 MDCの演算子の一覧 。あなたが遭遇する可能性がある唯一の例外は $シンボル です。

あなたの質問に答えるには、 条件演算子 を単純なif文に置き換えます。例は最もよいです：

var insurancePremium = age > 21 ? 100 : 200;

の代わりに：

var insurancePremium;

if (age > 21) {
    insurancePremium = 100;
} else {
    insurancePremium = 200;
}
18
David Tang
z = (x == y ? 1 : 2);

と同等です

if (x == y)
    z = 1;
else
    z = 2;

もちろん、それはもっと短いです。

8
Ernest Friedman-Hill

三項演算子

通常、Javascriptには条件付きステートメントがあります。

例： 

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

しかし、それは2行以上を含み、変数に代入することはできません。 Javascriptはこの問題に対する解決策を持っています 三項演算子 。三項演算子は一行で書いて変数に代入することができます。

例： 

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

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

6
Simplans

これは三項演算子と呼ばれます

tmp = (foo==1 ? true : false);
5
eagle12

ちょっと仲間はちょうどjsが真か偽のどちらかに評価することによって働くのを覚えているね？

三項演算子を取りましょう。

questionAnswered ? "Awesome!" : "damn" ;

まず、jsはquestionAnsweredがtrueかfalseかをチェックします。

true（?）の場合、「Awesome！」となります

そうでなければ（:）あなたは "いまいましい"となるでしょう。

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

4
Guy Keren

ほとんどの答えは正しいですが、もう少し追加したいと思います。 三項演算子は右結合です。つまり、次のように連鎖にすることができます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; }
}

詳細は ここ

3
Arif
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";
2
Gajendra D Ambi

それは一行に全部if statementです。

そう

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

評価される式は( )にあります

それがtrueと一致する場合、?の後にコードを実行します

それがfalseと一致する場合、:の後にコードを実行します

2
Jason Gennaro

それはternary operatorと呼ばれます。いくつかの詳細については、これは私がこれに関して答えた別の質問です：

'else'なしでIF else文を書く方法 /

1
Travis Webb

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

値を持ち、姓と名を取得する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
Ajay2707

これはおそらくこれを行うための最も正確な方法ではありません。しかし、三項演算子に慣れていない人にとっては、これは有用であることがわかります。私の個人的な好みは、コンディションブロックの代わりに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);

三項演算子

0
Joakim Sandqvist

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

condition ? expressionIfTrue : expressionIfFalse

expressionIfTrueをOGのifステートメントのレンダリングが真であると考えてください。
expressionIfFalseをelse文と考えてください。

例：

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

これはxの値をチェックし、trueなら最初のy =（value）、コロンの後の2番目のreturn：falseならy =（value）を返します。

0
PBrook

条件付き（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
Srikrushna Pal