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

BaselineWidely 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, можно использовать такое выражение:

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 < 18location.assign(url); // "stop.html"