Тернарный оператор в JavaScript: синтаксис и примеры использования в JS / React.js / Vue.js
Тернарный оператор - это условный оператор, который позволяет сократить написание условных выражений в JavaScript. Вместо использования конструкции if...else можно использовать тернарный оператор.
Синтаксис тернарного оператора в JavaScript
Синтаксис тернарного оператора выглядит следующим образом:
условие ? выражение1 : выражение2
Если условие истинно, то возвращается выражение1, если ложно - выражение2.
Примеры использования тернарного оператора
Давайте рассмотрим пример использования тернарного оператора в ванильном JavaScript:
const age = 18;
const message = age >= 18 ? 'Вы совершеннолетний' : 'Вы несовершеннолетний';
console.log(message);
В этом примере мы проверяем, является ли значение переменной age
больше или равным 18. Если это так, то мы выводим сообщение "Вы совершеннолетний", а если нет - "Вы несовершеннолетний".
Определение цвета в зависимости от значения переменной:
const color = value > 10 ? 'red' : 'green';
В данном примере, если значение переменной value
больше 10
, то переменная color
будет иметь значение 'red'
, иначе - 'green'
.
Вывод сообщения об ошибке, если значение переменной равно нулю:
const result = value !== 0 ? 100 / value : 'Error: division by zero';
В данном примере, если значение переменной value
не равно нулю, то переменная result
будет равна 100 / value
, в противном случае - 'Error: division by zero'
.
Также можно использовать тернарный оператор в составе других выражений, например:
return (value > 0 ? value : -value) * 2;
В данном примере, если значение переменной value
больше нуля, то возвращается значение value * 2
, иначе - -value * 2
.
Тернарный оператор также может быть полезен при работе с React.js и Vue.js.
Например, если мы хотим отобразить компонент в зависимости от условия, мы можем использовать тернарный оператор:
Пример для React.js:
function Greeting(props) {
return (
<div>
{props.isLoggedIn ? (
<h1>Добро пожаловать!</h1>
) : (
<h1>Пожалуйста, войдите в систему.</h1>
)}
</div>
);
}
Пример для Vue.js:
<template>
<div>
{{ isLoggedIn ? 'Добро пожаловать!' : 'Пожалуйста, войдите в систему.' }}
</div>
</template>
<script>
export default {
data() {
return {
isLoggedIn: true
};
}
};
</script>
В этих примерах мы проверяем, залогинен ли пользователь, и в зависимости от этого выводим разные сообщения.
Тернарный оператор является мощным инструментом, который может значительно упростить написание условных выражений в JavaScript. Он может быть полезен как при написании ванильного JavaScript, так и при работе с фреймворками.