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

Введение

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

Например, вы можете захотеть, чтобы форма отправлялась, если каждое поле заполнено правильно, но вы можете захотеть предотвратить отправку этой формы, если некоторые обязательные поля отсутствуют. Для решения подобных задач у нас есть условные операторы, которые являются неотъемлемой частью всех языков программирования.

Условные операторы выполняют определенное действие на основе результатов true или false.

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

Проверка местоположения пользователя и отображение правильного языка в зависимости от страны.
Отправлять форму при отправке или отображать предупреждения рядом с отсутствующими обязательными полями.
Открыть раскрывающийся список при нажатии или закрыть раскрывающийся список, если он уже открыт.
Отображать веб-сайт поставщика алкогольных напитков, если пользователь достиг совершеннолетия.
Отображать форму бронирования отеля, но не показывать, если отель забронирован

Условные операторы являются частью логики, принятия решений или управления потоком компьютерной программы. Вы можете сравнить условное утверждение с книгой «Выбери себе приключение» или блок-схемой.

В этом руководстве мы рассмотрим условные операторы, включая ключевые слова if, else и else if. Мы также рассмотрим тернарный оператор.

Если Заявление

Наиболее фундаментальным из условных операторов является оператор if. Оператор if оценивает, является ли утверждение истинным или ложным, и выполняется только в том случае, если оператор возвращает true. Блок кода будет проигнорирован в случае результата false, и программа перейдет к следующему разделу.

Оператор if записывается с ключевым словом if, за которым следует условие в круглых скобках, а код, который должен быть выполнен, заключен в фигурные скобки. Короче говоря, это можно записать как if(){}.

Вот более подробное рассмотрение основного оператора if.

if (condition) {
	// code that will execute if condition is true
}

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

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

// Set balance and price of item
const balance = 500;
const jeans = 40;

// Check if there are enough funds to purchase item
if (jeans <= balance) {
  console.log("You have enough money to purchase the item!");
}

OutputYou have enough money to purchase the item!

Баланс нашего аккаунта составляет 500, и мы хотим купить пару джинсов на 40. Используя оператор меньше или равно, мы можем проверить, меньше или равна ли цена джинсов сумме средств, которые у нас есть. Поскольку jeans <= balance оценивается как true, условие будет выполнено, и блок кода будет запущен.

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

// Set balance and price of item
const balance = 500;
const phone = 600;

// Check if there is enough funds to purchase item
if (phone <= balance) {
	console.log("You have enough money to purchase the item!");
}

В этом примере не будет вывода, так как phone <= balance оценивается как false. Блок кода будет просто проигнорирован, и программа перейдет к следующей строке.

Еще Заявление

С операторами if мы выполняем код только тогда, когда оператор оценивается как true, но часто мы хотим, чтобы произошло что-то еще, если условие не выполняется.

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

Оператор else пишется после оператора if и не содержит условия в круглых скобках. Вот синтаксис базового оператора if...else.

if (condition) {
	// code that will execute if condition is true
} else {
	// code that will execute if condition is false
}

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

// Set balance and price of item
const balance = 500;
const phone = 600;

// Check if there is enough funds to purchase item
if (phone <= balance) {
	console.log("You have enough money to purchase the item!");
} else {
	console.log("You do not have enough money in your account to purchase this item.");
}

OutputYou do not have enough money in your account to purchase this item.

Поскольку условие if не выполнено, код переходит к тому, что находится в операторе else.

Это может быть очень полезно для отображения предупреждений или информирования пользователя о том, какие действия следует предпринять для продвижения вперед. Обычно действие требуется как при успехе, так и при неудаче, поэтому if...else используется чаще, чем отдельный оператор if.

Иначе если Заявление

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

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

if (condition a) {
	// code that will execute if condition a is true
} else if (condition b) {
	// code that will execute if condition b is true
} else if (condition c) {
	// code that will execute if condition c is true
} else {
	// code that will execute if all above conditions are false
}

JavaScript попытается выполнить все операторы по порядку, и если ни один из них не будет успешным, он по умолчанию будет использовать блок else.

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

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

Требования к этому приложению следующие:

Оценка 90 и выше – это пятерка.
Оценка от 80 до 89 соответствует B
Оценка от 70 до 79 — тройка.
Оценка от 60 до 69 соответствует D.
Оценка 59 или ниже соответствует F

Ниже мы создадим простой набор операторов if, else и else if и сравним их с заданной оценкой.

// Set the current grade of the student
let grade = 87;

// Check if grade is an A, B, C, D, or F
if (grade >= 90) {
  console.log("A");
} else if (grade >= 80) {
  console.log("B");
} else if (grade >= 70) {
  console.log("C");
} else if (grade >= 60) {
  console.log("D");
} else {
  console.log("F");
}

OutputB

В нашем примере мы сначала проверяем наивысший балл, который будет больше или равен 90. После этого операторы else if будут проверять наличие значений, превышающих 80, 70 и 60, пока не будет достигнуто значение по умолчанию else неудовлетворительной оценки.

Хотя наше значение grade 87 технически также верно для C, D и F операторы остановятся на первом успешном. Таким образом, мы получаем результат B, который является первым совпадением.

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

Тернарный оператор, также известный как условный оператор, используется в качестве сокращения для оператора if...else.

Тернарный оператор записывается с синтаксисом вопросительного знака (?), за которым следует двоеточие (:), как показано ниже.

(condition) ? expression on true : expression on false

В приведенном выше операторе сначала записывается условие, а затем ?. Первое выражение будет выполняться при true, а второе выражение будет выполняться при false. Он очень похож на оператор if...else с более компактным синтаксисом.

В этом примере мы создадим программу, которая проверяет, является ли пользователь 21 или старше. Если это так, он выведет на консоль Вы можете войти. Если это не так, он выведет на консоль Вы не можете войти..

// Set age of user
let age = 20;

// Place result of ternary operation in a variable
const oldEnough = (age >= 21) ? "You may enter." : "You may not enter.";

// Print output
oldEnough;

Output'You may not enter.'

Поскольку age пользователя был меньше 21, сообщение о сбое выводилось на консоль. Эквивалентным этому if...else будет Вы можете ввести. в операторе if и Вы можете не вводить. в операторе else.

Заключение

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

В этой статье мы узнали, как использовать ключевые слова if, else и else if, а также рассмотрели вложенность операторов и использование тернарный оператор.