Вебинары Разобраться в IT Реферальная программа
Программирование Аналитика Дизайн Маркетинг
05 Июл 2024
7 мин
789

Тернарный оператор в Javascript: полное руководство

Рассказываем, что такое тернарный оператор в разных языках, есть ли особенности у этого оператора в JavaScript и в каких браузерах он работает. Показываем,

Тернарный оператор — это короткая форма записи условного оператора. Разбираемся, что это значит.

Что такое условный оператор

Условный оператор состоит из конструкции if-else. Ее используют, чтобы код выполнялся в зависимости от того, верно ли условие. Эта конструкция схожа во многих известных языках программирования.

В Python:

# Проверяем, равна ли переменная j единице
if j == 1:
print(«j равно 1»)
else:
print(«j не равно 1»)

В Java:

if (j == 1) {
System.out.println(«j равно 1»);
} else {
System.out.println(«j не равно 1»);
}

В JavaScript:

if (j == 1) {
console.log(«j равно 1»);
} else {
console.log(«j не равно 1»);
}

И синтаксис, и логика условных операторов if-else в этих языках почти идентичны. Если условие истинно, выполняется команда в блоке if (если), если ложно — команда в блоке else (иначе).

Что такое тернарный оператор

С тернарным оператором можно записать ту же проверку условия короче. Короткая форма записи условного оператора, как и длинная, похоже пишется в разных языках.

Например, в Python используется следующая запись:

“значение_если_истинно” if (условие) else “значение_если_ложно”;

Запишем уже знакомый пример в этом формате:

// Проверяем, равно ли значение переменной j единице с использованием тернарного оператора
result = «j равно 1» if j == 1 else «j не равно 1»

В Java и JavaScript используется двоеточие между двумя значениями. В остальном записи почти идентичны, только в Java указывается тип переменной:

String result = (j == 1) ? «j равно 1» : «j не равно 1»;

А в JavaScript нет:

let result = (j == 1) ? «j равно 1» : «j не равно 1»;

Тернарный оператор можно использовать с круглыми скобками. Это не обязательно, но рекомендовано: так код проще читать. Ставить скобки вокруг тернарного оператора можно в Python:

result = («j равно 1» if j == 1 else «j не равно 1»)

В Java и в JavaScript скобки ставятся вокруг условия:

// в Java
String result = (j == 1) ? «j равно 1» : «j не равно 1»;
// в JavaScript
let result = (j == 1) ? «j равно 1» : «j не равно 1»;

Синтаксис Python не просто отличается от синтаксиса Java и JavaScript. Он один из самых простых среди синтаксисов популярных языков программирования. Хотите разобраться в нём меньше чем за год — поступайте на курс «Python-разработчик».Эксперты расскажут вам не только про переменные, операторы, циклы, методы и списки — они помогут сразу же начать применять навыки на практике.

Курсы по программированию
Помогаем получить новую профессию с гарантией трудоустройства!
Подробнее
Курсы по программированию

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

Тернарный оператор в JavaScript практически ничем не отличается от тернарных операторов в других языках.

За что отвечает тернарный оператор

Он делает всё то же самое, что и обычная if-else конструкция. Однако применять его советуем, когда:

🔵 условие простое;
🔵 нужно вернуть одно из двух значений при соблюдении или несоблюдении условия.

Когда соблюдаются оба условия, тернарный оператор укорачивает и упрощает код. Но если его применять для сложных условий, код становится нечитабельным.

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

Браузер, который использует код на JavaScript, должен поддерживать тернарные операторы, чтобы они корректно работали. Тернарные операторы поддерживают практически все браузеры: Chrome, Opera, Firefox, Safari, Edge и Internet Explorer.

Тернарный оператор — часть спецификации ECMAScript 1. Ее приняли еще в 1997 году. Это значит, что оператор поддерживают даже очень старые версии браузеров. Его синтаксис — одинаковый во всех версиях JS. И работает во всех средах выполнения, в том числе серверных платформах.

Опасности тернарного оператора

В тернарный оператор можно вложить другой тернарный оператор. Но так лучше не делать: такой код сложнее читать и отлаживать.

Пример с вложенной проверкой второго значения:

// Вложенные тернарные операторы для проверки двух условий
let result = (j == 1) ? «j равно 1» : (k == 2) ? «k равно 2» : «j не равно 1 и k не равно 2»;
console.log(result); // Вывод результата на экран

Такой пример читать сложно. А если понадобятся изменения, их внести будет тяжелее, чем если бы вы использовали стандартную конструкцию if-else.

Эксперты Skypro на курсе «Веб-разработчик» рассказывают обо всём, что нужно знать таким специалистам: как применять переменные, циклы, условное ветвление, функции, массивы и объекты. Курс подойдет, даже если ничего не знаете о верстке: вас научат писать код на HTML и CSS и настраивать позиционирование элементов с Flexbox и Grid.

Примеры использования тернарного оператора

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

Например || (или):

// Проверяем, что j равно либо 1, либо 2
let j = 2;
let result = (j == 1 || j == 2) ? «j равно 1 или 2» : «j не равно 1 и не равно 2»;
console.log(result); // Выведет «j равно 1 или 2»

Или попробуем логический оператор && и проверим сразу два условия:

// Проверяем, что k больше 5 и меньше 10
let k = 7;
let result = (k > 5 && k < 10) ? «k в диапазоне между 5 и 10» : «k вне диапазона от 5 до 10»;
console.log(result); // Выведет «k в диапазоне между 5 и 10»

Тернарный оператор умеет не только возвращать значения. Еще он может вызывать разные функции — в зависимости от того, выполняется ли условие.

Представим, что есть две функции: modifyIfOne и modifyIfNotOne. Вызовем одну из них в зависимости от значения j.

function modifyIfOne(value) {
return value — 1;
}

function modifyIfNotOne(value) {
return value + 10;
}

Проверим работу тернарного оператора: зададим значение 3 для j:

let j = 3;
let result = (j == 1) ? modifyIfOne(j) : modifyIfNotOne(j);
console.log(result); // Выведет 13 (3 + 10)

«Необычное» использование тернарного оператора

Тернарный оператор в JavaScript может проверять сразу несколько условий — для этого пригодится вложенность. Так можно делать многоуровневые проверки и записывать их коротко. Правда, код потеряет лаконичность.

// Проверка значения переменной j
let result = (j === 1) ? ‘Значение равно единице’ :
(j === 2) ? ‘Значение равно двум’ :
(j === 3) ? ‘Значение равно трем’ :
‘Значение отличается от 1, 2 и 3’;

console.log(result);

В этом примере мы проверяем, равна ли переменная j хотя бы одному из трех значений. Как результат — возвращаем одну из четырех фраз.

В многоуровневых проверках тоже можно вызывать функции, а не просто возвращать строковые значения.

Рассмотрим ситуацию, где мы проверяем, равна ли переменная j определенному значению, и либо вызываем функцию, либо возвращаем строковое сообщение.

function modifyIfOne(value) {
return value — 1;
}

function modifyIfNotOne(value) {
return value + 10;
}

let j = 5;
let result = (j == 1) ? modifyIfOne(j) :
(j == 2) ? «j равно 2» :
(j == 3) ? modifyIfNotOne(j) :
«j не равно 1, 2 или 3»;
console.log(result); // Выведет «j не равно 1, 2 или 3»

Если j равно 1, программа вызывает функцию modifyIfOne. Если j равно 2, возвращаем строку «j равно 2». Если равно 3, вызываем modifyIfNotOne. Если j не равно ни одному из этих значений, возвращаем строку «j не равно 1, 2 или 3».

let j = 5;
let result = (j == 1) ? modifyIfOne(j) :
(j == 2) ? «j равно 2» :
(j == 3) ? modifyIfNotOne(j) :
«j не равно 1, 2 или 3»;
console.log(result); // Выведет «j не равно 1, 2 или 3»

Еще тернарный оператор можно применять прямо внутри метода класса.

Создадим класс NumberChecker, который содержит метод checkNumber с вложенными тернарными операторами.

checkNumber() {
return (this.j == 1) ? modifyIfOne(this.j) : // Если j равно 1, вызываем modifyIfOne
(this.j == 2) ? «j равно 2» : // Если j равно 2, возвращаем строку
(this.j == 3) ? modifyIfNotOne(this.j) : // Если j равно 3, вызываем modifyIfNotOne
«j не равно 1, 2 или 3»; // Если j не равно 1, 2 или 3, возвращаем данную строку
}
}

Добавим сами функции:

// Функция modifyIfOne добавляет 5 к переданному значению
function modifyIfOne(n) {
return n + 5;
}

// Функция modifyIfNotOne добавляет 10 к переданному значению
function modifyIfNotOne(n) {
return n + 10;
}

Проверяем работу вложенного тернарного оператора:

let checker = new NumberChecker(3);
console.log(checker.checkNumber()); // Выведет 13 (3 + 10)

Главное про тернарный оператор

🟦 Тернарный оператор — это краткая форма записи условного оператора if-else. Он упрощает код и делает его компактным. Тернарный оператор — это условная операция, которая принимает три аргумента: условие, значение, если условие верно, и значение, если условие неверно.

🟦 Условный оператор if-else выполняет код в зависимости от истинности условия. Синтаксис конструкции if-else схож во всех известных языках программирования: Python, Java и JavaScript.

🟦 В Python тернарный оператор выглядит так: «значение_если_истинно» if (условие) else «значение_если_ложно». Так можно сократить запись.

🟦 В Java и JavaScript тернарный оператор использует двоеточия: (условие) ? «значение_если_истинно» : «значение_если_ложно». Круглые скобки вокруг тернарного выражения упрощают чтение кода.

🟦 Тернарный оператор в JavaScript подходит для простых условий, когда нужно вернуть одно из двух значений. Тернарный оператор со сложными условиями трудно читать и отлаживать.

🟦 Тернарный оператор в JavaScript поддерживают все основные браузеры, потому что он — часть спецификации ECMAScript 1. Его поддерживают даже старые версии браузеров, и он работает одинаково во всех средах выполнения.

🟦 Не рекомендуем использовать вложенные тернарные операторы. С ними читать и отлаживать код трудно.

🟦 Вложенные тернарные операторы пригодятся для последовательной многоуровневой проверки нескольких условий, но сделают код сложнее.

🟦 Тернарный оператор можно применять внутри метода класса. Так можно инкапсулировать логику проверки в рамках метода.

🟦 Тернарный оператор может вызывать разные функции. Он определяет, какая функция вызывается при каком условии и создает разные сценарии работы программы.

Тест на профориентацию
За 10 минут узнайте, как ваш опыт пригодиться в IT индустрии
Подробнее
Тест на профориентацию

Добавить комментарий