Wie verwendet man den ? (bedingter) Operator in JavaScript?

Question

Mit einfachen Worten, was ist die ?: (bedingter, "ternärer") Operator und wie kann ich ihn verwenden?

Answer 1

Dies ist eine einzeilige Kurzform für eine if-else-Anweisung. Man nennt ihn den Bedingungsoperator. 1

Hier ein Beispiel für einen Code, der mit dem Bedingungsoperator verkürzt werden kann:

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

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

Diese kann mit der Option ?: etwa so:

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

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

Wie alle Ausdrücke kann auch der Bedingungsoperator als eigenständige Anweisung mit Seiteneffekten verwendet werden, allerdings ist dies ungewöhnlich außerhalb der Minifizierung:

userIsYoungerThan21 ? serveGrapeJuice() : serveWine();

Sie können sogar angekettet werden:

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

Seien Sie jedoch vorsichtig, sonst erhalten Sie einen verworrenen Code wie diesen:

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

---

1 Oft als "ternärer Operator" bezeichnet, aber eigentlich ist es nur a ternärer Operator [ein Operator, der drei Operanden akzeptiert]. Es ist der einzige, den JavaScript derzeit hat, aber.

Answer 2

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

Für den Fall, dass Sie eine ternäre Variable in einer Situation wie 'zeige eine Variable an, wenn sie gesetzt ist, sonst...' verwenden wollen, können Sie sie noch kürzer machen, ohne Ternär .

---

Anstelle von:

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

Sie können verwenden:

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

Dies ist das Javascripts-Äquivalent des ternären Operators von PHP ?:

Oder sogar:

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

Sie wertet die Variable aus, und wenn sie falsch oder nicht gesetzt ist, geht sie zur nächsten weiter.

Answer 3

Man nennt ihn den "ternären" oder "bedingten" Operator.

Beispiel

Der Operator ?: kann als Abkürzung für eine if...else-Anweisung verwendet werden. Er wird normalerweise als Teil eines größeren Ausdrucks verwendet, wo eine if...else Anweisung umständlich wäre. Für Beispiel:

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

Das Beispiel erzeugt eine Zeichenkette mit dem Inhalt "Guten Abend.", wenn es nach 18 Uhr ist. Der entsprechende Code mit einer einer if...else-Anweisung würde wie folgt aussehen wie folgt aussehen:

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

Von MSDN JS-Dokumentation .

Im Grunde handelt es sich um eine kurze bedingte Anweisung.

Siehe auch:

• Vorrang von Operatoren mit Javascript Ternärer Operator
• Wikipedia

Answer 4

Es ist ein bisschen schwierig zu googeln, wenn man nur Symbole hat ;) Die zu verwendenden Begriffe sind "JavaScript bedingter Operator".

Wenn Sie weitere lustige Symbole in JavaScript sehen, sollten Sie zuerst die Operatoren von JavaScript nachschlagen: Mozilla Developer Center's Liste der Betreiber . Die einzige Ausnahme, auf die Sie wahrscheinlich stoßen werden, ist die $ Symbol .

Um Ihre Frage zu beantworten, Bedingungsoperatoren einfache if-Anweisungen ersetzen. Am besten ist ein Beispiel:

var insurancePremium = age > 21 ? 100 : 200;

Anstelle von:

var insurancePremium;

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

Answer 5

Die meisten der Antworten sind richtig, aber ich möchte noch etwas hinzufügen. Die ternärer Operator ist rechts-assoziativ, d. h. es kann sein verkettet auf folgende Art und Weise if … else-if… else-if … else :

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

Äquivalent zu:

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

Weitere Einzelheiten sind aquí