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⁩.

Der bedingte (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 Bedingung wahrheitsgemäß (truthy) ist, gefolgt von einem Doppelpunkt (:), und schließlich der Ausdruck, der ausgeführt wird, wenn die Bedingung falsch (falsy) ist. Dieser Operator wird häufig als Alternative zu einem if...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 die condition einen wahrheitsgemäßen (truthy) Wert ergibt (einen, der true entspricht oder in true umgewandelt werden kann).
exprIfFalse: Ein Ausdruck, der ausgeführt wird, wenn die condition falsch (falsy) ist (das heißt, einen Wert hat, der in false 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, der null 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 einer if … else if … else if … else-Kette:

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

Dies entspricht der folgenden if...else-Kette.

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