Как использовать тернарный оператор в JavaScript

В этом руководстве мы рассмотрим синтаксис тернарного оператора в JavaScript и некоторые его распространенные применения.

Тернарный оператор (также известный как условный оператор ) может использоваться для выполнения встроенной проверки условий вместо использования if…elseоператоров. Это делает код короче и читабельнее. Его можно использовать для присвоения значения переменной на основе условия или выполнения выражения на основе условия.

Синтаксис

Тернарный оператор принимает три операнда; это единственный оператор в JavaScript, который делает это. Вы вводите условие для проверки, за которым следует вопросительный знак, за которым следуют два выражения, разделенные двоеточием. Если условие считается истинным ( truety ), выполняется первое выражение; если оно признано ложным, выполняется последнее выражение.

Он используется в следующем формате:

condition ? expr1 : expr2

Вот conditionусловие для проверки. Если его значение считается равным true, expr1выполняется. В противном случае, если его значение считается равным false, expr2выполняется.

expr1и expr2 являются любым видом выражения. Это могут быть переменные, вызовы функций или даже другие условия.

Например:

1 > 2 ? console.log("You are right") : console.log('You are wrong');

Использование тернарного оператора для присвоения значения

Один из наиболее распространенных вариантов использования тернарных операторов — решить, какое значение присвоить переменной. Часто значение переменной может зависеть от значения другой переменной или условия.

Хотя это можно сделать с помощью if…elseоператора, это может сделать код длиннее и менее читаемым. Например:

const numbers = [1,2,3];
let message;
if (numbers.length > 2) {
  message = 'The numbers array is too long';
} else {
  message = 'The numbers array is short';
}

console.log(message); // "The numbers array is too long"

В этом примере кода вы сначала определяете переменную message. Затем вы используете if…elseоператор для определения значения переменной.

Это можно просто сделать в одной строке с помощью тернарного оператора:

const numbers = [1,2,3];
let message = numbers.length > 2 ? 'The numbers array is too long' : 'The numbers array is short';

console.log(message); // "The numbers array is too long"

Использование тернарного оператора для выполнения выражений

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

Например, если вы хотите решить, какую функцию запускать на основе значения переменной, вы можете сделать это следующим образом, используя if…elseоператор:

if (feedback === "yes") {
  sayThankYou();
} else {
  saySorry();
}

Это можно сделать в одной строке с помощью тернарного оператора:

feedback === "yes" ? sayThankYou() : saySorry();

Если feedbackимеет значение yes, то sayThankYouфункция будет вызвана и выполнена. В противном случае saySorryфункция будет вызвана и выполнена.

Использование тернарного оператора для нулевых проверок

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

Используя тернарный оператор, вы можете проверить, что переменная не является nullили undefinedпросто передав имя переменной в позиции операнда условия.

Это особенно полезно, когда переменная является объектом. Если вы попытаетесь получить доступ к свойству объекта, который на самом деле nullили undefined, произойдет ошибка. Проверка того, что объект действительно установлен первым, может помочь вам избежать ошибок.

Например:

let book = { name: 'Emma', author: 'Jane Austen' };
console.log(book ? book.name : 'No book'); // "Emma"

book = null;
console.log(book ? book.name : 'No book'); // "No book"

В первой части этого блока кода bookнаходится объект с двумя свойствами — nameи author. Когда тернарный оператор используется для book, он проверяет, что это не nullили undefined. Если это не так — это означает, что оно имеет значение — доступ к nameсвойству осуществляется и выполняется вход в консоль. В противном случае, если он равен нулю, No bookвместо этого выполняется вход в консоль.

Так bookкак это не null, в консоли записывается название книги. Однако во второй части, когда применяется то же условие, условие в тернарном операторе не выполняется, так как bookis null. Итак, в консоль будет выведено «Нет книги».

Вложенные условия

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

Например, значение переменной может зависеть от более чем одного условия. Его можно реализовать с помощью if…else if…else:

let score = '67';
let grade;
if (score < 50) {
  grade = 'F';
} else if (score < 70) {
  grade = 'D'
} else if (score < 80) {
  grade = 'C'
} else if (score < 90) {
  grade = 'B'
} else {
  grade = 'A'
}

console.log(grade); // "D"

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

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

let score = '67';
let grade = score < 50 ? 'F'
  : score < 70 ? 'D'
  : score < 80 ? 'C'
  : score < 90 ? 'B'
  : 'A';

console.log(grade); // "D"

Оценивается первое условие, score < 50т.е. Если это true, то значение gradeравно F. Если это false, то вычисляется второе выражение, которое равно score < 70.

Это продолжается до тех пор, пока либо все условия не будут равны false, что означает, что значение оценки будет равно A, либо пока одно из условий не будет оценено как trueи его истинное значение не будет присвоено grade.

Пример

const button = document.querySelector('button');
const numberElm = document.querySelector('#number');
const resultElm = document.querySelector('#result');

button.addEventListener('click', function () {
  resultElm.textContent = numberElm.value > 100 ? 'Too High' : ( numberElm.value < 100 ? 'Too Low' : 'Perfect');
});

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

Если вы введете значение меньше 100, появится сообщение «Слишком низкое». Если вы введете значение больше 100, появится сообщение «Слишком высокое». Если вы введете 100, появится сообщение «Идеально».

Заключение

Как объясняется в примерах в этом руководстве, тернарный оператор в JavaScript имеет множество вариантов использования. Во многих ситуациях тернарный оператор может повысить читаемость нашего кода, заменив длинные if…elseоператоры.