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

10 января 2023 г.
180
Тернарный оператор в 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
Поделиться: