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

В этом руководстве вы узнаете, как использовать тернарный оператор JavaScript, чтобы сделать ваш код более кратким.

Введение в тернарный оператор JavaScript

Когда вы хотите выполнить блок, если условие оценивается как true, вы часто используете оператор if…else. Например:

let age = 18; 
let message; 
if(age >= 16) { 
 message = 'You can drive.'; } 
else { 
 message = 'You cannot drive.'; 
} 

console.log(message);

В этом примере показано, что человек может водить машину, если его возраст больше или равен 16. В качестве альтернативы вы можете использовать тернарный оператор вместо оператора if-else следующим образом:

let age = 18; 
let message; 

age >= 16 ?(message = 'You can drive.') :(message = 'You cannot drive.'); 

console.log(message);

Или вы можете использовать тернарный оператор в выражении следующим образом:

let age = 18; 
let message; 

message = age >= 16 ? 'You can drive.' : 'You cannot drive.'; 

console.log(message);

Вот синтаксис тернарного оператора:

condition ? expressionIfTrue : expressionIfFalse;

В этом синтаксисе condition — это выражение, результатом которого является логическое значение, true или false.

Если условие true, выполняется первое выражение ( expresionIfTrue ). Если оно ложно, выполняется второе выражение ( expressionIfFalse ).

Ниже показан синтаксис тернарного оператора, используемого в выражении:

let variableName = condition ? expressionIfTrue : expressionIfFalse;

В этом синтаксисе, если condition true, variableName будет принимать результат первого выражения ( expressionIfTrue ) или expressionIfFalse в противном случае.

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

Давайте рассмотрим несколько примеров использования тернарного оператора.

1) Выполнение нескольких операций

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

let authenticated = true; 
let nextURL = authenticated 
 ?(alert('You will redirect to admin area'), '/admin') 
 :(alert('Access denied'), '/403'); 

// redirect to nextURL here 
console.log(nextURL); // '/admin'

В этом примере возвращаемое значение тернарного оператора является последним значением в списке, разделенном запятыми.

2) Упрощение с помощью тернарного оператора

См. следующий пример:

let locked = 1; 
let canChange = locked != 1 ? true : false;

Если locked 1, то для переменной canChange устанавливается значение false, в противном случае — значение true. В этом случае вы можете упростить его, используя логическое выражение следующим образом:

let locked = 1; 
let canChange = locked != 1;

3) Использование нескольких тернарных операторов JavaScript

В следующем примере показано, как использовать два тернарных оператора в одном выражении:

let speed = 90; 
let message = speed >= 120 ? 'Too Fast' : speed >= 80 ? 'Fast' : 'OK'; 
console.log(message);

Выход:

Fast

Хорошей практикой является использование тернарного оператора, когда он упрощает чтение кода. Если логика содержит много операторов if...else, вам следует избегать использования тернарных операторов.

Заключение

• Используйте тернарный оператор ( ?: ) в JavaScript, чтобы сделать код более лаконичным.