Тернарный оператор в JavaScript

10 января 2023 г.
321
Тернарный оператор в JavaScript может принимать три операнда:
  • условие, за которым следует знак вопроса (?), принимающее значение true или false;
  • первое выражение, выполняющиеся, если условие истинно, за ним следует двоеточие «:»;
  • выражение, выполняющиеся, если условие ложно.
Оператор используется в качестве укороченного варианта условного оператора if.

Например, выводим сообщение в myDiv:
 
let Age = 18;
document.getElementById("myDiv").innerHTML = 'Ваш возраст' + (Age > 18 ? "больше восемнадцати" : "восемнадцать и меньше") + "лет";
// выводит "Ваш возраст больше восемнадцати"
Или, выводим значение в переменную:
 
let Age = 17;
let Access = Age >= 18 ? true : false;
console.log( Access ); // выводит в консоль false

Также можно сделать множественные тернарные операции (при этом условный оператор ассоциативен справа):
 
let Age = 21, Privilege = true;
let Access = Age >= 18 ? "Доступ запрещён" : Privilege ? "Доступ разрешён" : "Доступ запрещён";
console.log( Access ); // выводит в консоль "Доступ разрешён"

Тернарные операции можно использовать и сами по себе - для выполнения различных операций:
 
let Denied = false, Age = 25;
Age > 18 ? location.assign("some_good_page.html") : Denied = true;
// пересылает на страницу some_good_page.html

Или, тот же пример с другими значениями:
 
let Denied = false, Age = 17;
Age > 18 ? location.assign("some_good_page.html") : Denied = true;
// устанавливает переменной Denied значение true

Также возможно выполнять несколько операций на каждое сравнение, разделив их запятыми:
 
let Denied = false, Age = 23;
Age > 18 ? (
   alert("Доступ к ресурсу разрешён"),
   location.assign("some_good_page.html")
) : (
   Denied = true,
   alert("Доступ к ресурсу запрещён.")
);
// выводит сообщение "Доступ к ресурсу разрешён"
// и затем пересылает на страницу some_good_page.html

При присвоении значения переменной возможно выполнение нескольких операций. Переменной присваивается значение, которое стоит последним в списке значений, разделённых запятой.
 
let Age = 16;
let myURL = Age > 18 ? (
some_function_1(),
// возвращаемое значение some_function_1 будет проигнорировано, потому что
// не является последним в списке значений, разделённых запятой
"some_good_page.html"
// значение переменной будет присвоено, если Age > 18
) : (
some_function_2(),
// возвращаемое значение some_function_2 также будет проигнорировано
"access_denied.html"
// значение будет присвоено, если Age > 18
);
location.assign(myURL); // пересылает на страницу access_denied.html
Поделиться: