Введение

A троичный оператор — это оператор с тремя операндами, который поддерживается большинством языков программирования, включая JavaScript, Java, C++, C# и многие другие. Его также называют условный оператор потому что он считается более лаконичной альтернативой условный (if-else) утверждение.

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

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

Как и в любом другом языке, тернарный оператор в JavaScript имеет три операнда:

(condition) ? returnExpressionIfTrue : returnExpressionIfFalse;

Мы можем легко перевести это в соответствующее if-else заявление:

if (condition) {
    returnExpressionIfTrue;
} else {
    returnExpressionIfFalse;
}

Это в основном означает, что condition и returnExpressionIfTrue соответствовать if пункт соответствующего if-else заявление, и returnExpressionIfFalse соответствует else раздел указанного заявления.

Если же линия индикатора condition оценивается как true, returnExpressionIfTrue выражение выполняется. С другой стороны, если condition оценивается как false, returnExpressionIfFalse выполнен.

Примечание: Чтобы быть более точным, JavaScript проверяет, condition оценивается как истинное или ложное значение. Ложь значения — это все значения, которые JavaScript оценивает как false в логическом выражении - false, none, undefined, NaN, 0, -0, 0nи "". Все остальные значения оцениваются как true в логическом выражении - таким образом считается правдивый.

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

Идеальный способ объяснить троичный оператор было бы сравнить его с if-else утверждение. Предположим, у нас есть определенный возраст, и мы хотим проверить, младше этого пользователя или нет:

let age = 21;
let result;

if(age >= 20){
    result = "User can view content";
} else {
    result = "User cannot view content";
}
console.log(result);

Давайте перепишем это if-else блокировать использование троичный оператор :

let age = 21;
let result = age >= 20 ? "User can view content" : "User cannot view content";

console.log(result);

По сути, все, что стоит перед знаком вопроса (?) Является состояние мы проверяем. Два других операнда выражения, первый перед точкой с запятой (:) и второй после. Если условие true, значение result будет "User can view the content". В противном случае значение, присвоенное result будет "User cannot view the content".

Рассмотрим еще один интересный пример:

let name = "John Doe";

if (name) {
    console.log("Hello " + name);
} else {
    console.log("Hello " + "Guest");
}

С name непустая строка, она считается правдивый ценность. Таким образом, этот пример приведет к регистрации "Hello John Doe" в консоли. Если name были пустой строкой – вывод будет "Hello Guest". Этот сценарий легко преобразуется в тернарный оператор:

let name = "John Doe";

name ? console.log("Hello " + name) : console.log("Hello " + "Guest");

Хотя, возможно, это выходит за рамки этого руководства, другим интересным решением является использование логический or оператор вместо тернарного оператора. Это даст нам абсолютно тот же результат, что и два других подхода:

console.log("Hello " + (name || "Guest"));

Обработка многострочных выражений с помощью тернарного оператора

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

const age = 22;
let youth;

if (age <= 30) {
    youth = true;
    console.log("I am a Youth!");
} else {
    youth = false;
    console.log("I am an Adult!");
}

console.log(youth);

Мы должны были бы поместить эти выражения в скобки, а затем разделить их запятой:

age <= 30
    ? ((youth = true), console.log("I am a Youth!"))
    : ((youth = false), console.log("I am an Adult!"));

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

Вложенные тернарные операторы

A вложенные Тернарный оператор относится к возможности поместить тернарный оператор в другой. Эти операторы используются, когда мы хотим оценить несколько условий. Например, с if-else утверждение, мы можем использовать else if оператор для вложения нескольких условий вместе:

let studentScore = 65;
let studentGrade;

if (studentScore >= 70) {
    studentGrade = "A";
} else if (studentScore >= 60) {
    studentGrade = "B";
} else if (studentScore >= 50) {
    studentGrade = "C";
} else if (studentScore >= 45) {
    studentGrade = "D";
} else {
    studentGrade = "E";
}

console.log(`Your grade is ${studentGrade}`);

Когда мы реализуем это с помощью тернарного оператора, у нас будет что-то вроде этого:

let studentScore = 65;

let studentGrade = studentScore >= 70 ? "A"
    : studentScore >= 60 ? "B"
    : studentScore >= 50 ? "C"
    : studentScore >= 45 ? "D"
    : "E";

console.log(`Your grade is ${studentGrade}`);

Это может быстро стать трудным для чтения, если мы не обращаем внимания и не понимаем, как работает тернарный оператор. Что еще более важно — даже если вы можете прочитать это — как насчет ваших коллег? В таких случаях рекомендуется использовать if-else или switch операторы, а не писать код, который может запутать других.

Заключение

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

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