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

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.

Условный (тернарный) оператор - единственный оператор в JavaScript, принимающий три операнда: условие, за которым следует знак вопроса (?), затем выражение, которое выполняется, если условие истинно, сопровождается двоеточием (:), и, наконец, выражение, которое выполняется, если условие ложно. Он часто используется в качестве сокращённого варианта инструкции if...else.

Синтаксис

условие ? выражение1 : выражение2

Параметры

условие

Выражение, принимающее значение true или false.

выражение1, выражение2

Выражения, значения которых могут принадлежать любому типу.

Описание

Оператор возвращает значение выражения1, если условие верно, и значение выражения2 в противном случае. Например, чтобы вывести сообщение, текст которого зависит от значения переменной isMember, можно использовать такое выражение:

js
function getFee(isMember) {
  return "The fee is " + (isMember ? "$2.00" : "$10.00");
}

console.log(getFee(true));
// Выводит в консоль: "$2.00"

console.log(getFee(false));
// Выводит в консоль: "$10.00"

Также можно присваивать значения переменным на основе результатов работы тернарного оператора :

js
const elvisLives = Math.PI > 4 ? "Да" : "Нет";
console.log(elvisLives); // "Нет"

Возможны множественные тернарные операции (обратите внимание: условный оператор ассоциативен справа):

js
const firstCheck = false;
const secondCheck = false;
const access = firstCheck
  ? "Доступ запрещён"
  : secondCheck
    ? "Доступ запрещён"
    : "Доступ разрешён";

console.log(access); // выводит в консоль "Доступ разрешён"

Тернарные операции можно использовать и сами по себе - для выполнения различных операций:

js
const age = 16;
let stop = false;

age > 18 ? location.assign("continue.html") : (stop = true);

Также возможно выполнять несколько операций на каждое сравнение, разделив их запятыми:

js
const age = 23;
let stop = false;

age > 18
  ? (alert("Хорошо, вы можете продолжить."), location.assign("continue.html"))
  : ((stop = true), alert("Простите, вы ещё так юны!"));

При присвоении значения также возможно выполнение более одной операции. В этом случае переменной будет присвоено то значение, которое стоит последним в списке значений, разделённых запятой.

js
const age = 16;

const url =
  age > 18
    ? (alert("Хорошо, вы можете продолжить."),
      // alert вернёт "undefined", но это будет проигнорировано, потому что
      // не является последним в списке значений, разделённых запятой
      "continue.html") // значение будет присвоено, если age > 18
    : (alert("Вы слишком молоды!"), alert("Простите :-("), "stop.html"); // значение будет присвоено, если age < 18

location.assign(url); // "stop.html"

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

Specification
ECMAScript Language Specification
# sec-conditional-operator

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

BCD tables only load in the browser

Смотрите также