Условный (тернарный) оператор

Условный (тернарный) оператор — единственный оператор JavaScript, который принимает три операнда: условие, за которым следует знак вопроса (?), затем выражение, которое будет выполнено, если условие истинно, за которым следует двоеточие (:), и, наконец, выражение, которое будет выполнено, если условие ложно. Этот оператор часто используется как альтернатива инструкции if...else.

Попробуйте

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"

Синтаксис

condition ? exprIfTrue : exprIfFalse

Параметры

condition

Выражение, значение которого используется как условие.

exprIfTrue

Выражение, которое выполняется, если condition оценивается как истинное значение (равное или преобразуемое в true).

exprIfFalse

Выражение, которое выполняется, если condition ложно (то есть имеет значение, которое может быть преобразовано в false).

Описание

Помимо false, возможными ложными выражениями являются: null, NaN, 0, пустая строка ("") и undefined. Если condition является одним из них, результатом условного выражения будет результат выполнения выражения exprIfFalse.

Примеры

Основной пример

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

Обработка нулевых значений

Одно из распространенных применений — обработка значения, которое может быть null:

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"

Цепочки условий

Тернарный оператор является правоассоциативным, что означает, что его можно "цепочить" следующим образом, подобно цепочке if … else if … else if … else:

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

Это эквивалентно следующей цепочке if...else.

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

Спецификации

Совместимость с браузерами

См. также

• if...else
• Оператор нулевого слияния (??)
• Опциональная цепочка (?.)
• Learn: Принятие решений в коде — условные конструкции
• Руководство по выражениям и операторам