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

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

Синтаксис

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

Параметры

условие: Выражение, принимающее значение true или false.

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

Описание

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

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

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

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

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

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

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

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

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

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

const age = 16;
let stop = false;

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

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

const age = 23;
let stop = false;

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

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

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"

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

Спецификация	Статус	Комментарий
ECMAScript 2015 (6th Edition, ECMA-262) Определение 'Условный Оператор' в этой спецификации.	Стандарт
ECMAScript 5.1 (ECMA-262) Определение 'Условный оператор' в этой спецификации.	Стандарт
ECMAScript 1st Edition (ECMA-262) Определение 'Условный оператор' в этой спецификации.	Стандарт	Изначальное определение. Реализация в JavaScript 1.0.

Поддержка браузерами

BCD tables only load in the browser

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

Инструкция if...else