Тернарный оператор
Тернарный оператор работает с тремя операндами: одним условием и двумя выражениями. Возвращает первое выражение, если условие истинно и второе, если условие ложно.
Используется как компактная замена условного оператора if . . . else .
Пример
Скопировать ссылку «Пример» Скопировано
const num = 5console.log(num === 5 ? 'Пять' : 'Не пять')// Пятьconst num = 5 console.log(num === 5 ? 'Пять' : 'Не пять') // Пять
Как пишется
Скопировать ссылку «Как пишется» Скопировано
(A) ? (B) : (C)(A) ? (B) : (C)
Где A — условие, B — первое выражение, C — второе выражение.
Если первый операнд A вычисляется в истинное выражение true , то оператор вернёт выражение B. Если в false — вернёт выражение C.
Как понять
Скопировать ссылку «Как понять» Скопировано
По механике работы тернарный оператор похож на инструкцию if . . . else , но позволяет писать меньше кода и записывать результат работы сразу в переменную.
В качестве примера преобразуем код, который использует инструкцию if . . . else :
const num = 10let result if (num > 10) result = 'Число больше 10'> else result = 'Число меньше или равно 10'> console.log(result)const num = 10 let result if (num > 10) result = 'Число больше 10' > else result = 'Число меньше или равно 10' > console.log(result)
Заменим условную конструкцию тернарным оператором:
const num = 10const result = num > 10 ? 'Число больше 10' : 'Число меньше или равно 10'console.log(result)const num = 10 const result = num > 10 ? 'Число больше 10' : 'Число меньше или равно 10' console.log(result)
Код сократился и стал устанавливать значение переменной num сразу при объявлении. Это позволило использовать const вместо let .
Тернарный оператор как выражение
Скопировать ссылку «Тернарный оператор как выражение» Скопировано
Тернарный оператор возвращает результат, его можно записать в переменную, как в примере выше, или вернуть с помощью return из функции:
const salutation = function(name) return name ? `Рад видеть, $!` : 'Привет, друг!'> console.log(salutation('Дока Дог'))// 'Рад видеть, Дока Дог!'console.log(salutation())// 'Привет, друг!'const salutation = function(name) return name ? `Рад видеть, $name>!` : 'Привет, друг!' > console.log(salutation('Дока Дог')) // 'Рад видеть, Дока Дог!' console.log(salutation()) // 'Привет, друг!'
Так как результат работы тернарного оператора можно записать в переменную, то смело делаем вывод, тернарный оператор — выражение. Подробнее о разнице между выражениями и инструкциями читайте в отдельной статье.
Вложенные тернарные операторы
Скопировать ссылку «Вложенные тернарные операторы» Скопировано
Внутри одного тернарного оператора можно написать другой:
const num = 10const result = num > 10 ? 'Число больше 10' : num === 10 ? 'Число равно 10' : 'Число меньше 10'console.log(result)// 'Число равно 10'const num = 10 const result = num > 10 ? 'Число больше 10' : num === 10 ? 'Число равно 10' : 'Число меньше 10' console.log(result) // 'Число равно 10'
В этом случае запись идентична использованию конструкций if . . . else if . . . else . Сначала проверяется первое условие, если оно ложно, то проверяется второе и так далее. Отступы в примере проставлены для лучшей читаемости конструкции, они не влияют на выполнение кода.
На практике
Скопировать ссылку «На практике» Скопировано
Илья Космачев советует
Скопировать ссылку «Илья Космачев советует» Скопировано
При выборе между if . . . else и тернарным оператором в приоритет нужно ставить читабельность. Код читается чаще, чем пишется, поэтому чем лучше код читается, тем легче его понимать и изменять.
Разберём выбор между тернарным оператором и if . . . else на примерах.
Допустим, нужно по-разному поприветствовать нового и уже зарегистрированного пользователя. Здесь удобно использовать тернарный оператор, так как проверка короткая:
const greetings = function(isRegistered, userName) return isRegistered ? `Привет, $!` : 'Привет, незнакомец'>const greetings = function(isRegistered, userName) return isRegistered ? `Привет, $userName>!` : 'Привет, незнакомец' >
Когда появляются вложенные тернарные операторы, лучше переходить на if . . . else . Сравните код с тернарным оператором:
const greetings = function(isRegistered, userName, bePolite) return isRegistered ? `Привет, $!` : bePolite ? 'Здравствуйте!' : 'Привет, незнакомец'>const greetings = function(isRegistered, userName, bePolite) return isRegistered ? `Привет, $userName>!` : bePolite ? 'Здравствуйте!' : 'Привет, незнакомец' >
const greetings = function(isRegistered, userName, bePolite) if (isRegistered) return `Привет, $!` > else if (bePolite) return 'Здравствуйте!' > else return 'Привет, незнакомец' >>const greetings = function(isRegistered, userName, bePolite) if (isRegistered) return `Привет, $userName>!` > else if (bePolite) return 'Здравствуйте!' > else return 'Привет, незнакомец' > >
Если же приветствие зависит от роли, то цепочки вложенных тернарных операторов становятся нечитаемыми:
const greetings = function(role) return result = role === 'admin' ? 'Приветствую, босс' : role === 'moder' ? 'Приветствую, смотритель порядка' : role === 'user' ? 'Здравствуй, пользователь' : role === 'guest' ? 'Здравствуй, гость' : 'Привет, некто'>const greetings = function(role) return result = role === 'admin' ? 'Приветствую, босс' : role === 'moder' ? 'Приветствую, смотритель порядка' : role === 'user' ? 'Здравствуй, пользователь' : role === 'guest' ? 'Здравствуй, гость' : 'Привет, некто' >
Такой код можно улучшить форматированием, но лучше использовать switch :
const greetings = function(role) switch (role) case 'admin': return 'Приветствую, босс' case 'moder': return 'Приветствую, смотритель порядка' case 'user': return 'Здравствуй, пользователь' case 'guest': return 'Здравствуй, гость' default: return 'Привет, некто' >>const greetings = function(role) switch (role) case 'admin': return 'Приветствую, босс' case 'moder': return 'Приветствую, смотритель порядка' case 'user': return 'Здравствуй, пользователь' case 'guest': return 'Здравствуй, гость' default: return 'Привет, некто' > >
На собеседовании
Скопировать ссылку «На собеседовании» Скопировано
Условный (тернарный) оператор
Условный (тернарный) оператор — единственный оператор в JavaScript, принимающий три операнда: условие, за которым следует знак вопроса (?), затем выражение, которое выполняется, если условие истинно, сопровождается двоеточием (:), и, наконец, выражение, которое выполняется, если условие ложно. Он часто используется в качестве сокращённого варианта инструкции if. else .
Синтаксис
условие ? выражение1 : выражение2
Параметры
Выражение, принимающее значение true или false .
Выражения, значения которых могут принадлежать любому типу.
Описание
Оператор возвращает значение выражения1 , если условие верно, и значение выражения2 в противном случае. Например, чтобы вывести сообщение, текст которого зависит от значения переменной isMember , можно использовать такое выражение:
function getFee(isMember) return 'The fee is ' + (isMember ? '$2.00' : '$10.00'); > console.log(getFee(true)); // Выводит в консоль: "$2.00" console.log(getFee(false)); // Выводит в консоль: "$10.00"
Также можно присваивать значения переменным на основе результатов работы тернарного оператора :
const elvisLives = Math.PI > 4 ? 'Да' : 'Нет'; console.log(elvisLives); // "Нет"
Возможны множественные тернарные операции (обратите внимание: условный оператор ассоциативен справа):
const firstCheck = false; const secondCheck = false; const access = firstCheck ? 'Доступ запрещён' : secondCheck ? 'Доступ запрещён' : 'Доступ разрешён'; console.log(access); // выводит в консоль "Доступ разрешён"
Тернарные операции можно использовать и сами по себе — для выполнения различных операций:
const age = 16; let stop = false; age > 18 ? location.assign('continue.html') : stop = true;
Также возможно выполнять несколько операций на каждое сравнение, разделив их запятыми:
const age = 23; let stop = false; age > 18 ? ( alert('Хорошо, вы можете продолжить.'), location.assign('continue.html') ) : ( stop = true, alert('Простите, вы ещё так юны!') );
При присвоении значения также возможно выполнение более одной операции. В этом случае переменной будет присвоено то значение, которое стоит последним в списке значений, разделённых запятой.
const age = 16; const url = age > 18 ? ( alert('Хорошо, вы можете продолжить.'), // alert вернёт "undefined", но это будет проигнорировано, потому что // не является последним в списке значений, разделённых запятой 'continue.html' // значение будет присвоено, если age > 18 ) : ( alert('Вы слишком молоды!'), alert('Простите :-('), 'stop.html' // значение будет присвоено, если age < 18); location.assign(url); // "stop.html"
Спецификации
| Спецификация | Статус | Комментарий |
|---|---|---|
| ECMAScript 2015 (6th Edition, ECMA-262) Определение ‘Условный Оператор’ в этой спецификации. | Стандарт | |
| ECMAScript 5.1 (ECMA-262) Определение ‘Условный оператор’ в этой спецификации. | Стандарт | |
| ECMAScript 1st Edition (ECMA-262) Определение ‘Условный оператор’ в этой спецификации. | Стандарт | Изначальное определение. Реализация в JavaScript 1.0. |
Поддержка браузерами
BCD tables only load in the browser
Смотрите также
Found a content problem with this page?
This page was last modified on 15 мая 2023 г. by MDN contributors.
Your blueprint for a better internet.