webentwicklung-frage-antwort-db.com.de

Wie benutzt du das? : (bedingter) Operator in JavaScript?

Kann mir jemand bitte in einfachen Worten erklären, was der Operator ?: (bedingt, "ternär") ist und wie er verwendet wird?

327
muudless

Dies ist eine einzeilige Abkürzung für eine if-else-Anweisung. Es wird der bedingte Operator genannt.1

Hier ist ein Beispiel für Code, der mit dem Bedingungsoperator gekürzt werden könnte:

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

Dies kann mit dem ?: so gekürzt werden:

userIsYoungerThan21 ? serveGrapeJuice() : serveWine();

In Javascript kann der bedingte Operator einen Ausdruck auswerten, nicht nur eine Anweisung:

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

Sie können sogar verkettet werden:

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

Seien Sie jedoch vorsichtig, sonst bekommen Sie gewundenen Code wie folgt:

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

1 Wird oft "der ternäre Operator" genannt, aber in Wirklichkeit ist es einfach a ternärer Operator [ein Operator, der drei Operanden akzeptiert]. Es ist jedoch das einzige, was JavaScript derzeit hat.

506
Peter Olson

Ich möchte hinzufügen einige der gegebenen Antworten.

Wenn Sie auf einen Ternären stoßen (oder diesen verwenden möchten), beispielsweise 'eine Variable anzeigen, wenn sie gesetzt ist, sonst ...', können Sie ihn noch kürzer machen, ohne einen Ternären.


Anstatt von:

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

Sie können verwenden:

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

Dies sind Javascripts, die dem ternären Kurzoperator von PHP entsprechen. ?:

Oder auch:

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

Die Variable wird ausgewertet, und wenn sie falsch oder nicht festgelegt ist, wird mit der nächsten fortgefahren.

119

Es wird als "ternärer" oder "bedingter" Operator bezeichnet.

Beispiel

Der Operator?: Kann als .__ verwendet werden. Abkürzung für eine if ... else-Anweisung . Es wird normalerweise als Teil eines .__ verwendet. größerer Ausdruck wo ein if ... else Aussage wäre umständlich. Zum Beispiel:

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

Das Beispiel erstellt eine Zeichenfolge mit "Guten Abend". wenn es ist nach 18 uhr Der äquivalente Code mit Eine if ... else-Anweisung würde wie .__ aussehen. folgt:

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

Aus MSDN JS-Dokumentation .

Im Grunde handelt es sich um eine Abkürzungsbedingung.

Siehe auch: 

24

Es ist etwas schwierig zu googeln, wenn Sie nur Symbole haben;) Die zu verwendenden Begriffe sind "Javascript-bedingter Operator".

Wenn Sie weitere lustige Symbole in Javascript sehen, sollten Sie zunächst nach den Operatoren von Javascript suchen: MDCs Operatorliste . Die einzige Ausnahme, der Sie wahrscheinlich begegnen, ist das Symbol $ .

Um Ihre Frage zu beantworten, ersetzen bedingte Operatoren einfache if-Anweisungen. Ein Beispiel ist am besten:

var insurancePremium = age > 21 ? 100 : 200;

Anstatt:

var insurancePremium;

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

ist äquivalent zu

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

außer natürlich ist es kürzer.

Ternärer Betreiber

Normalerweise haben wir bedingte Anweisungen in Javascript. 

Beispiel:

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

er enthält jedoch zwei oder mehr Zeilen und kann keiner Variablen zugewiesen werden. JavaScript hat eine Lösung für dieses Problem Ternärer Operator . Ternärer Operator kann in einer Zeile schreiben und einer Variablen zuweisen.

Beispiel:

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

Dieser ternäre Operator ist in der Programmiersprache C ähnlich.

6
Simplans

Es wird der ternäre Operator genannt

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

Hey Kumpel erinnere dich einfach an js Werke, indem du entweder wahr oder falsch bewertest, oder? 

nehmen wir einen ternären Operator: 

questionAnswered ? "Awesome!" : "damn" ;

Zunächst prüft js, ob questionAnswered eine true oder false ist.

wenn true (?), erhalten Sie "Awesome!" 

sonst (:) wirst du "verdammt" bekommen;

Hoffe das hilft Freund :) 

3
Guy Keren
x = 9
y = 8

unary

++x
--x

Binär

z = x + y

Ternär

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

Es ist ein if statement alles in einer Zeile.

So 

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

Der auszuwertende Ausdruck befindet sich im ( )

Wenn es wahr ist, führen Sie den Code nach dem ? aus

Wenn es falsch ist, führen Sie den Code nach dem : aus

2
Jason Gennaro

Die meisten Antworten sind korrekt, aber ich möchte noch etwas hinzufügen. Der ternäre Operator ist rechtsassoziativ, dh er kann verkettet folgendermaßen if … else if … else if … else sein:

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

Gleichwertig:

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

Weitere Details finden Sie hier

2
Arif

Es heißt ternary operator. Für weitere Informationen habe ich eine weitere Frage, die ich dazu beantwortet habe:

Wie schreibe ich eine IF else-Anweisung ohne "else"

1
Travis Webb

Wir können sowohl mit Jquery als auch Länge als Beispiel verwenden:

Nehmen wir an, wir haben das Textfeld "GuarantorName", das einen Wert hat und den Vornamen und Nachnamen erhalten soll - es kann null sein ... _ 

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

Wir können den folgenden Code mit Jquery mit dem Mindestcode verwenden

    

    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

Dies ist wahrscheinlich nicht der eleganteste Weg, dies zu tun. Aber für jemanden, der nicht mit ternären Operatoren vertraut ist, könnte sich dies als nützlich erweisen. Meine persönliche Präferenz ist es, 1-Liner-Fallbacks anstelle von Condition-Blocks durchzuführen.

  // 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);

Ternärer Betreiber

0

Ternäre Ausdrücke sind sehr nützlich in JS, insbesondere in React. Hier ist eine vereinfachte Antwort auf die vielen guten und detaillierten Antworten.

condition ? expressionIfTrue : expressionIfFalse

Stellen Sie sich expressionIfTrue als OG vor, wenn die Anweisung wahr ist.
Denken Sie an expressionIfFalse als die else-Anweisung.

Beispiel:

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

dies überprüfte den Wert von x, das erste y = (value) wurde zurückgegeben, wenn true, das zweite Ergebnis nach dem Doppelpunkt: y = (value), wenn es falsch ist.

0
PBrook

Der bedingte (ternäre) Operator ist der einzige JavaScript-Operator das braucht drei Operanden. Dieser Operator wird häufig als .__ verwendet. Abkürzung für die if-Anweisung.

condition ? expr1 : expr2 

Wenn bedingung wahr ist, gibt der Operator den Wert von expr1; .__ zurück. Andernfalls wird der Wert von Ausdruck2 zurückgegeben.

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));

Für weitere Erläuterungen lesen Sie bitte den MDN-Dokumentlink

0
Srikrushna Pal