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

434

Kann mir bitte jemand in einfachen Worten erklären, was der ?:(bedingte, "ternäre") Operator ist und wie man ihn benutzt?

muudless
quelle
2
Das sind Betreiber. Die Operanden sind die Werte, mit denen Sie diese Operatoren verwenden.
BoltClock
7
Unterhaltsame Tatsache: Einige Sprachen (nämlich Groovy ) haben tatsächlich einen Operanden ?:(wie Sie ihn geschrieben haben, ohne Aussage dazwischen) - den Elvis-Operator . Ziemlich clever.
Rob Hruska
Mögliches Duplikat von Javascript, falls alternativ
Rob Hruska
3
Googeln von Symbolen kann problematisch sein, aber wie wäre es, wenn Sie "Javascript-Operatoren" googeln (und sie alle lernen)?
nnnnnn
Überprüfen Sie diesen Wiki-Eintrag en.wikipedia.org/wiki/Elvis_operator
Nerdroid

Antworten:

644

Dies ist eine einzeilige Abkürzung für eine if-else-Anweisung. Es heißt der bedingte Operator. 1

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

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

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

Dies kann folgendermaßen gekürzt ?:werden:

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

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

Wie alle Ausdrücke kann der bedingte Operator auch als eigenständige Anweisung mit Nebenwirkungen verwendet werden, obwohl dies außerhalb der Minimierung ungewöhnlich ist :

userIsYoungerThan21 ? serveGrapeJuice() : serveWine();

Sie können sogar verkettet werden:

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

Seien Sie jedoch vorsichtig, sonst erhalten Sie einen verschlungenen Code wie den folgenden:

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

1 Wird oft als "ternärer Operator" bezeichnet, ist jedoch nur ein ternärer Operator [ein Operator, der drei Operanden akzeptiert]. Es ist jedoch das einzige JavaScript, das derzeit verfügbar ist.

Peter Olson
quelle
56
Nur um den Namen zu verdeutlichen: ternaryist die Art des Operators (dh es besteht aus 3 Teilen). Der Name dieses bestimmten ternären Operators lautet conditional operator. Es gibt nur einen ternären Operator in JS, sodass die Begriffe missbraucht werden.
Gone Coding
1
Das ternäre Formular @tryingToGetProgrammingStraight ist technisch gesehen ein Ausdruck, und Ausdrücke können andere Ausdrücke enthalten, um Ausdrucksbäume zu bilden. Dieser Code genau dort ist, wie ein Ausdrucksbaum aussieht :) siehe: fsharpforfunandprofit.com/posts/expressions-vs-statements
Alexander Troup
1
Es wird dringend empfohlen, das Beispiel für den allgemeinen Anwendungsfall zu aktualisieren, nicht für einen Anwendungsfall mit Nebenwirkungen, der häufig als Missbrauch des Bedieners angeführt wird.
TJ Crowder
7
Ich bin mir nicht sicher, warum es unten einen kleinen Grammatik-Klappentext gibt, aber er ist falsch. Wenn Javascript nur einen Operatortyp hat, dann ist es definitiv richtig, den ternären Operator und nicht einen ternären Operator zu sagen ... "Dieser ternäre Operator ist ein ternärer Operator in Javascript (und es ist der einzige)" ist dumm, benutze einfach DAS und es impliziert all das.
Andrew
1
@MarkCarpenterJr In JavaScript ist dies normalerweise der ||Operator, da er kurzschließt, wenn der Wert auf der linken Seite wahr ist.
Peter Olson
142

Ich möchte einige zu den gegebenen Antworten hinzufügen .

Wenn Sie in einer Situation wie "Eine Variable anzeigen, wenn sie gesetzt ist, sonst ..." auf ein Ternär stoßen (oder es verwenden möchten), können Sie es ohne Ternär noch kürzer machen .


Anstatt:

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 gesetzt ist, wird mit der nächsten fortgefahren.

Jeffrey Roosendaal
quelle
4
Ich hatte mit Ternär zu kämpfen und fand schließlich diese Antwort. Vielen Dank!
Ljubisa Livac
Wenn ich die geschweiften Klammern um den ternären Operator nicht verwenden würde 'Hello ' + (username ? username : 'guest'), Hello + wenn dies ignoriert wird und nur das Ergebnis der ternären Operation zurückgegeben wird. Kann jemand erklären warum?
Shiva
2
@ Shiva Ohne die Klammern wird der gesamte linke Teil bewertet : 'Hello ' + usernamewas immer der Fall ist true, da es sich um eine Zeichenfolge mit einer Länge von mehr als 0 handelt.
Jeffrey Roosendaal
26

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

Beispiel

Der Operator?: Kann als Verknüpfung für eine if ... else-Anweisung verwendet werden. Es wird normalerweise als Teil eines größeren Ausdrucks verwendet, bei dem eine if ... else-Anweisung umständlich wäre. Zum Beispiel:

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

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

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

Aus der MSDN JS-Dokumentation .

Grundsätzlich handelt es sich um eine bedingte Kurzaussage.

Siehe auch:

Michael Robinson
quelle
5
Es heißt eigentlich der bedingte Operator.
ChaosPandion
5
Es ist ein ternärer bedingter Operator
Petah
4
@ Michael - Siehe Abschnitt 11.12 Bedingter Operator (? :)
ChaosPandion
7
Streiten sich die Leute immer noch über dieses Zeug? Meine Güte.
BoltClock
7
@BoltClock - Nicht gerade streiten, nur versuchen, unser wesentliches Vokabular zu normalisieren.
ChaosPandion
21

Es ist ein wenig schwierig zu googeln, wenn Sie nur Symbole haben;) Die zu verwendenden Begriffe sind "Javascript-Bedingungsoperator".

Wenn Sie in Javascript weitere lustige Symbole sehen, sollten Sie zuerst die Operatoren von Javascript nachschlagen: die Liste der Operatoren von MDC . Die einzige Ausnahme, auf die Sie wahrscheinlich stoßen, 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;
}
David Tang
quelle
Gute Erklärung, aber das Beispiel ist schlecht, da es abhängig vom Ergebnis eines booleschen Ausdrucks einen booleschen Wert zuweist, was wenig Sinn macht. Sie möchten var olderThan20 = age > 20;stattdessen lieber verwenden .
BalusC
@BalusC - ja :) Das habe ich gemerkt, aber Beispiele sind schwer aus meinem Hut zu ziehen! Werde mir einen besseren vorstellen ...
David Tang
9
z = (x == y ? 1 : 2);

ist äquivalent zu

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

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

Ernest Friedman-Hill
quelle
7

Die meisten Antworten sind richtig, aber ich möchte noch etwas hinzufügen. Der ternäre Operator ist rechtsassoziativ, was bedeutet, dass er auf folgende Weise verkettet werden kann if … else-if … else-if … else:

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

Arif
quelle
1
Das ist es, wonach ich suche.
Sazal Das
6

Es wird der ternäre Operator genannt

tmp = (foo==1 ? true : false);
Adler12
quelle
6
Es wird der bedingte Operator genannt. Es ist das einzige Beispiel für einen ternären Operator in der Sprache.
Leichtigkeitsrennen im Orbit
tmp = foo == 1 macht das gleiche, also wäre es genug
Robert Varga
6

Ternärer Operator

Im Allgemeinen haben wir bedingte Anweisungen in Javascript.

Beispiel:

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

Es enthält jedoch zwei oder mehr Zeilen und kann keiner Variablen zugewiesen werden. Javascript hat eine Lösung für dieses Problem Ternary Operator . Der ternäre Operator kann in eine 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.

Simplans
quelle
5

Hey Kumpel, erinnere dich nur daran, dass js funktioniert, indem er entweder wahr oder falsch bewertet, oder?

Nehmen wir einen ternären Operator:

questionAnswered ? "Awesome!" : "damn" ;

Zunächst prüft js, ob questionAnswered trueoder ist false.

if true( ?) du bekommst "Awesome!"

sonst ( :) wirst du "verdammt" bekommen;

Hoffe das hilft Freund :)

Guy Keren
quelle
2

Es ist if statementalles in einer Zeile.

Damit

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

Der auszuwertende Ausdruck befindet sich in der ( )

Wenn es mit true übereinstimmt, führen Sie den Code nach dem aus ?

Wenn es mit false übereinstimmt, führen Sie den Code nach dem aus :

Jason Gennaro
quelle
var x = 1; y = (x == 1)? wahr falsch;
Augurone
2
x = 9
y = 8

einstellig

++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";
Gajendra D Ambi
quelle
1

Es heißt das ternary operator. Für weitere Informationen habe ich hier eine weitere Frage beantwortet:

Wie schreibe ich eine IF else-Anweisung ohne 'else'?

Travis Webb
quelle
4
Eigentlich ist ternären die Art von Operator (dh es besteht aus 3 Teilen). Der Name dieses bestimmten ternären Operators lautet conditional operator. Es gibt nur einen ternären Operator in JS, sodass die Begriffe missbraucht werden.
Gone Coding
1

Dies ist wahrscheinlich nicht gerade der eleganteste Weg, dies zu tun. Für jemanden, der mit ternären Operatoren nicht vertraut ist, könnte sich dies jedoch als nützlich erweisen. Meine persönliche Präferenz ist es, 1-Liner-Fallbacks anstelle von Bedingungsblöcken 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 Operator

Joakim Sandqvist
quelle
1

Wir können mit Jquery sowie Länge wie im folgenden Beispiel verwenden:

Angenommen, wir haben ein GuarantorName-Textfeld, das einen Wert hat und Vor- und Nachnamen abrufen möchte. Es kann null sein. So rathar als

        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 minimalem Code 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>

Ajay2707
quelle
1

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

condition ? expressionIfTrue : expressionIfFalse

Stellen Sie sich expressionIfTruedie OG if-Anweisung vor, die wahr macht.
Betrachten Sie expressionIfFalseals die else-Anweisung.

Beispiel:

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

Dies überprüfte den Wert von x, das erste y = (Wert) wurde zurückgegeben, wenn true, die zweite Rückgabe nach dem Doppelpunkt: gab y = (Wert) zurück, wenn false.

PBrook
quelle
0

Der bedingte (ternäre) Operator ist der einzige JavaScript-Operator, der drei Operanden akzeptiert. Dieser Operator wird häufig als Verknüpfung für die if-Anweisung verwendet.

condition ? expr1 : expr2 

Wenn die Bedingung erfüllt ist, gibt der Operator den Wert von expr1 zurück. Andernfalls wird der Wert von expr2 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));

Weitere Informationen finden Sie unter Link zum MDN-Dokument

Srikrushna
quelle
0

Wenn Sie eine Bedingung haben, überprüfen Sie die Instanzfunktion in Javascript . Es ist einfach, ternäre Operatoren zu verwenden . für die Implementierung wird nur eine einzige Zeile benötigt . Ex:

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

Eine solche Funktion mit einer Bedingung kann wie folgt geschrieben werden.

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

Bedingung ? wenn wahr: wenn falsch

Sunali Bandara
quelle
-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>"
Chandrashekhar Komati
quelle
Sie können HTML auch mit ternären Operator anhängen
Chandrashekhar Komati
Das ist wirklich nicht so, wie Sie eine ternäre Zuweisung schreiben und auch === not == verwenden sollten. Andernfalls könnten Sie es genauso gut tun. Es sunday ?sollte seinsun = "<span class='label " + ((sunday === 'True' ? 'label-success' : 'label-danger') + "'>S</span>"
TheRealMrCrowley
Der springende Punkt des bedingten Ternärs ist, die bedingten Zuweisungswerte zu verkürzen, andernfalls sollten Sie einfach eine if-Anweisung verwenden
TheRealMrCrowley
Jetzt sag mir, dass dies richtig ist oder nicht. Wenn du falsch sagst, dann funktioniert das immer noch und ich benutze mein Projekt.
Chandrashekhar Komati
Ich weiß, dass es "funktioniert", wie Sie es im ersten Beispiel haben, aber auch das, was ich bereitgestellt habe, das Sie als zweite Version angegeben haben. Beachten Sie, wie viel unnötige Duplizierung in der Top-Version im Vergleich zu der von mir angegebenen vorhanden ist. JS ist Code, der an den Browser gesendet wird, daher ist die Codelänge wichtig
TheRealMrCrowley