В JavaScript имеется обычный оператор условия if-else
, с которым я был знаком уже давно. Но вот недавно познакомился с его разновидностью - тернарным оператором ?
. Да, именно так - оператор вопросительный знак.
На первый взгляд, такой тернарный оператор выглядит запутанно и совершенно непонятно. Но стоит вникнуть в суть, как все становится просто.
Сначала - что значит тернарный оператор? В JavaScript существуют унарные операторы, бинарные операторы и вот теперь, оказывается, есть тернарный оператор. Опять-таки, все просто. Унарный оператор оперирует с одним операндом, бинарный оператор - с двумя операндами, тернарный оператор - с тремя операндами.
Синтаксис тернарного оператора ?
таков:
var result = (условие) ? alpha : beta
Читается такой оператор условия следующим образом: если выполняется условие (условие)
, то переменной result
присвоить значение alpha
; если условие (условие)
не выполняется, то переменной result
присвоить значение beta
.
Тернарный оператор условия очень похож на обычный оператор условия if-else
. Можно сказать, что это сокращенная версия обычного оператора условия if-else
.
Давайте сравним оба условия:
- оператор условия
if-else
:
var result;
if ( a > 0){
result = true;
} else {
result = false;
}
- тернарный оператор условия
?
:
var result = ( a > 0 ) ? true : false;
Очень похоже, не правда ли? Здесь есть один важный момент - в данном
случае у обоих операторов есть одна общая черта. И в первом, и во-втором
случае переменной result
присваивается значение в зависимости от выполнения условия.
А вот такой вариант уже будет непохож на предыдущий:
var summOne;
var summTwo;
if ( a > 0 ){
summOne = a + b;
} else {
summTwo = a * b;
}
Обратите внимание, что в этом условии результат присваивается разным переменным. В данном случае тенарный оператор условия ?
уже не подойдет; он не применим в данном случае.
Отсюда вывод: тернарный оператор применим для случая, когда одной переменной присваивается разный результат в зависимости от условия.
Условие на тернарном операторе можно сделать разветвленными и тогда вид такого оператора дейсвительно будет выглядеть достаточно запутанным:
login = prompt('Enter your login','');
var pass = (login == 'black') ? 'Welcome!' :
(login = 'white') ? 'Good bay!' :
(login = 'green') ? 'See you next week!' :
'I don\'t know you!';
Хотя тут все просто на самом деле, если разобраться. Если прочитать это условие, то оно будет выглядеть таким образом.
- Переменной
login
присвоить значение, полученное от пользователя. - Если значение переменной
login
равноblack
, то переменнойpass
присвоить значениеWelcome!
. - Иначе, если значение переменной
login
равноwhite
, то переменнойpass
присвоить значениеGood bay!
. - Иначе, если значение переменной
login
равноgreen
, то переменнойpass
присвоить значениеSee you next week!
. - Иначе переменной
pass
присвоить значениеI don\'t know you!
.
Приведу еще один пример нескольких операторов ?
, нагло скопированный с ресурса learn.javascript.ru вместе с описанием его работы (все в угоду доходчивости изложения материала):
var age = prompt('возраст?', 18);
var message = (age < 3) ? 'Здравствуй, малыш!' :
(age < 18) ? 'Привет!' :
(age < 100) ? 'Здравствуйте!' :
'Какой необычный возраст!';
alert( message );
Поначалу может быть сложно понять, что происходит. Однако, внимательно приглядевшись, мы замечаем, что это обычная последовательная проверка!
Вопросительный знак проверяет сначала age < 3
, если верно — возвращает ‘Здравствуй, малыш!’, если нет — идет за двоеточие и проверяет age < 18
. Если это верно — возвращает ‘Привет!’, иначе проверка age < 100
и ‘Здравствуйте!’… И наконец, если ничего из этого не верно, то ‘Какой необычный возраст!’.
То же самое через if-else
:
if (age < 3) {
message = 'Здравствуй, малыш!';
} else if (a < 18) {
message = 'Привет!';
} else if (age < 100) {
message = 'Здравствуйте!';
} else {
message = 'Какой необычный возраст!';
}
Вот так работает тернарный оператор ?
в JavaScript. Ресурс learn.javascript.ru советует использовать тернарный оператор ?
по назначению и не заменять им обычный оператор условия if-else
.
Данный материал основан на ресурсе learn.javascript.ru и не претендует на оригинальность.
Комментарии