Вступление
В программировании будет много случаев, когда вы захотите запустить различные блоки кода в зависимости от пользовательского ввода или других факторов.
В качестве примера вам может потребоваться, чтобы форма была отправлена, если каждое поле заполнено правильно, но вы можете запретить отправку этой формы, если отсутствуют какие-либо обязательные поля. Для достижения таких задач мы имеем условные утверждения , которые являются неотъемлемой частью всех языков программирования.
Условные операторы выполняют конкретное действие, основанное на результатах результата 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!");
}
You 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.");
}
You 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 и выше — это A
- Класс от 80 до 89 — это B
- Сорт от 70 до 79 — это C
- Класс от 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");
}
B
В нашем примере мы сначала проверяем самый высокий балл, который будет больше или равен 90
. После этого else if
заявления будет проверять больше 80
, 70
и 60
до тех пор , пока не достигнет значения по умолчанию else
из двойки.
Хотя наша grade
ценность 87
технически также верна для C
, D
и F
, заявления будут останавливаться на первом успешном. Поэтому мы получаем результат B
, который является первым совпадением.
Тернарный оператор
Тройной оператор , также известный как условный оператор, используется как сокращение для if...else
заявления.
Тройной оператор записывается с синтаксисом вопросительного знака ( ?
), за которым следует двоеточие ( :
), как показано ниже.
(condition) ? expression on true : expression on false
В приведенном выше утверждении сначала записывается условие, за которым следует a ?
. Первое выражение будет выполнено true
, и второе выражение будет выполнено false
. Он очень похож на if...else
инструкцию с более компактным синтаксисом.
В этом примере мы создадим программу, которая проверяет, является ли пользователь 21
старше или старше. Если они есть, он будет печатать "You may enter"
на консоли. Если это не так, он будет печатать "You may not enter."
на консоли.
// 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;
'You may not enter.'
Поскольку age
пользователь был меньше 21
, сообщение об ошибке было выведено на консоль. if...else
Эквивалентно это было бы "You may enter."
в if
заявлении, и "You may not enter."
в else
заявлении.
Заключение
Условные заявления предоставляют нам контроль потока, чтобы определять выход наших программ. Они являются одним из основных строительных блоков программирования и могут быть найдены практически на всех языках программирования.
В этой статье мы узнали о том , как использовать if
, else
и else if
ключевые слова, и покрыли вложенность заявлений, а также использование троичного оператора.