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 July 2015.

Der Bedingungsoperator (ternäre Operator) ist der einzige JavaScript-Operator, der drei Operanden annimmt: eine Bedingung, gefolgt von einem Fragezeichen (?), dann ein Ausdruck, der ausgeführt wird, wenn die Bedingung truthy ist, gefolgt von einem Doppelpunkt (:), und schließlich der Ausdruck, der ausgeführt wird, wenn die Bedingung falsy ist. Dieser Operator wird häufig als Alternative zu einer if...else-Anweisung verwendet.

Probieren Sie es aus

Syntax

condition ? exprIfTrue : exprIfFalse

Parameter

condition: Ein Ausdruck, dessen Wert als Bedingung verwendet wird.
exprIfTrue: Ein Ausdruck, der ausgeführt wird, wenn die condition zu einem truthy-Wert ausgewertet wird (einem, der true entspricht oder in true konvertiert werden kann).
exprIfFalse: Ein Ausdruck, der ausgeführt wird, wenn die condition falsy ist (das heißt, einen Wert hat, der in false konvertiert werden kann).

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

Umgang mit null-Werten

Eine häufige Verwendung 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 Ketten

Der ternäre Operator ist rechtsassoziativ, was bedeutet, dass er in folgender Weise "verkettet" werden kann, ähnlich wie ein 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;
  }
}

Spezifikationen

Specification
ECMAScript Language Specification # sec-conditional-operator

Browser-Kompatibilität

BCD tables only load in the browser