Bedingungsoperator (ternärer Operator)

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 2015⁩.

Derbedingte (ternäre) Operator ist der einzige JavaScript-Operator, der drei Operanden benötigt:eine Bedingung gefolgt von einem Fragezeichen (?), dann ein Ausdruck, der ausgeführt wird, wenn die Bedingungwahrheitsgemäß (truthy) ist, gefolgt von einem Doppelpunkt (:), und schließlich der Ausdruck, der ausgeführt wird, wenn die Bedingungfalsch (falsy) ist.Dieser Operator wird häufig als Alternative zu einemif...else-Statement verwendet.

Probieren Sie es aus

function getFee(isMember) {  return isMember ? "$2.00" : "$10.00";}console.log(getFee(true));// Expected output: "$2.00"console.log(getFee(false));// Expected output: "$10.00"console.log(getFee(null));// Expected output: "$10.00"

Syntax

condition ? exprIfTrue : exprIfFalse

Parameter

condition: Ein Ausdruck, dessen Wert als Bedingung genutzt wird.
exprIfTrue: Ein Ausdruck, der ausgeführt wird, wenn diecondition einenwahrheitsgemäßen (truthy) Wert ergibt (einen, dertrue entspricht oder intrue umgewandelt werden kann).
exprIfFalse: Ein Ausdruck, der ausgeführt wird, wenn dieconditionfalsch (falsy) ist (das heißt, einen Wert hat, der infalse umgewandelt werden kann).

const age = 26;const beverage = age >= 21 ? "Beer" : "Juice";console.log(beverage); // "Beer"

Umgang mit null-Werten

Ein häufiges Anwendungsbeispiel ist der Umgang mit einem Wert, dernull sein kann:

const greeting = (person) => {  const name = person ? person.name : "stranger";  return `Howdy, ${name}`;};console.log(greeting({ name: "Alice" })); // "Howdy, Alice"console.log(greeting(null)); // "Howdy, stranger"

Bedingte Verkettungen

Der ternäre Operator ist rechts-assoziativ, was bedeutet, dass er in folgender Weise "verkettet" werden kann, ähnlich einerif … else if … else if … else-Kette:

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

Dies entspricht der folgendenif...else-Kette.

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