Javascript оператор условный оператор: Условный (тернарный) оператор — JavaScript

Leave a Comment / Разное / By /

Содержание

Тернарный оператор — JavaScript — Дока

Кратко

Скопировано

Тернарный оператор работает с тремя операндами: одним условием и двумя выражениями. Возвращает первое выражение, если условие истинно и второе, если условие ложно.

Используется как компактная замена условного оператора 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 resultif (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 ? `Рад видеть, ${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 ? `Привет, ${userName}!` : 'Привет, незнакомец'}
          const greetings = function(isRegistered, userName) {
  return isRegistered ? `Привет, ${userName}!` : 'Привет, незнакомец'
}

Когда появляются вложенные тернарные операторы, лучше переходить на if. ..else. Сравните код с тернарным оператором:

const greetings = function(isRegistered, userName, bePolite) {  return isRegistered ? `Привет, ${userName}!` : bePolite ? 'Здравствуйте!' : 'Привет, незнакомец'}
          const greetings = function(isRegistered, userName, bePolite) {
  return isRegistered ? `Привет, ${userName}!` : bePolite ? 'Здравствуйте!' : 'Привет, незнакомец'
}

И код с if...else:

const greetings = function(isRegistered, userName, bePolite) {  if (isRegistered) {    return `Привет, ${userName}!`  } 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 'Привет, некто'
    }
}

На собеседовании

Скопировано

Это партнёрская рубрика, мы выпускаем её совместно с сервисом онлайн-образования Яндекс Практикум. Приносите вопрос, на который не знаете ответа, в задачи, мы разложим всё по полочкам и опубликуем. Если знаете ответ, присылайте пулреквест на GitHub.

❓

Что значит слово «тернарный»?

Скопировано

Это вопрос без ответа. Вы можете помочь! Почитайте о том, как контрибьютить в Доку.

Истина или ложь? | JavaScript Camp

В этой главе будет много нового, но уж очень сложно быть не должно: ведь, в общем-то, всё вертится вокруг простой идеи — истина или ложь?

До сих пор мы всегда имели дело лишь с примитивными типами данных — с числами и строками. Быть может, вам уже встречался термин «примитивный» применительно к программированию? Если нет, я поясню: «примитивный» (ещё говорят «простой») означает, что этот тип данных не является объектом (к этому моменту мы ещё вернёмся) и не имеет встроенных методов работы (то есть функций⚙️).

Тип данных, который вам обязательно понадобятся, называется булевым boolean, или логическим. Булевый тип всегда имеет значение либо true ✅ — истина, либо false ❎ — ложь. И только так, и никак иначе! Он либо врёт, либо говорит правду — пан или пропал, свет включен или выключен, либо есть, либо нет. Вы либо сделали домашнее задание, либо нет. Только два 2️⃣ значения true ✅ или false.

Видео​

Операторы равенства​

Булевы значения приходятся как нельзя кстати, когда нам необходимо что-то сравнить в JavaScript. Когда такая необходимость появляется, мы сразу же вызываем операторы сравнения. Сейчас мы последовательно изучим все восемь операторов сравнения, но штука в том, что в результате работы каждого из них мы всё равно всегда останемся с булевым значением — либо

true ✅ , либо false ❎ .

Равно

==​

Оператор равно сначала приводит операнды к одному типу, и затем применяет строгое сравнение. Если оба операнда являются объектами, то JavaScript сравнивает внутренние ссылки, которые равны в том случае, если они ссылаются на один и тот же объект в памяти.

Синтаксис📖:

x == y

Примеры:

1 == 1 // истина
'1' == 1 // истина
1 == '1' // истина
3 == 5 // ложь
0 == false // истина
'foo' == 'bar' // ложь

Введите по очереди примеры в переменную 🔔

bool нашего LIVE EDITOR

function learnJavaScript() { let bool = 1 == 1 return bool.toString() }

Loading…

Не равно

!=​

Оператор не равно возвращает🔄 true ✅ в том случае, если операнды не равны. Он аналогичен оператору равенства, перед сравнением приводит операнды к одному типу. В случае если оба операнда являются объектами, JavaScript сравнивает внутренние ссылки, которые не равны в том случае, если относятся к разным объектам в памяти.

Синтаксис📖:

x != y

Примеры:

1 != 2 // истина
1 != '1' // ложь
'1' != 1 // ложь
1 != true // ложь
0 != false // ложь
'foo' != 'bar' // истина

Введите по очереди примеры в переменную 🔔 bool нашего LIVE EDITOR

function learnJavaScript() { let bool = 1 != 2 return bool. toString() }

Loading…

Строго равно

===​

Оператор возвращает🔄 истину в том случае, если операнды строго равны. В отличие от оператора равно, данный оператор не приводит операнды к одному типу.

Синтаксис📖:

x === y

Примеры:

3 === 3 // истина
3 === '3' // ложь
'foo' === 'foo' // истина

Оператор чётко следит за тем, чтобы и значение, и тип были строго идентичными. В случае с 3 === '3' значение, конечно, идентично, однако тип — нет: ведь первое число, а второе строка.

Введите по очереди примеры в переменную 🔔 bool нашего LIVE EDITOR

function learnJavaScript() { let bool = 3 === 3 return bool.toString() }

Loading…

Строго не равно

!==​

Оператор строго не равно возвращает🔄 истину в том случае, если операнды не равны, или их типы отличаются друг от друга.

Синтаксис📖:

x !== y

Примеры:

3 !== '3' // истина
4 !== 3 // истина

Введите по очереди примеры в переменную 🔔 bool нашего LIVE EDITOR

function learnJavaScript() { let bool = 3 === 3 return bool.toString() }

Loading…

Почему не надо использовать == и !=? А потому, что такой необходимости, в общем-то, никогда и нет. В любом возможном случае, когда вы можете их использовать, всегда можно использовать и строгие === и !==. Если же вы желаете большей гибкости в ответе (скажем, чтобы с одинаковым успехом принималось как 1, так и '1' или true ✅ ), то можно просто включить нужные варианты ответа в сам код📟 (не меняя при этом ===).

Операторы сравнения​

Больше

>​

Оператор больше возвращает🔄 истину в том случае, если значение левого операнда больше, чем правого.

Синтаксис📖:

Примеры:

4 > 3 // истина
1 > 5 // ложь

Введите по очереди примеры в переменную 🔔 bool в LIVE EDITOR

function learnJavaScript() { let bool = 4 > 3 return bool.toString() }

Loading…

Меньше

<​

Оператор меньше, возвращает🔄 истину в том случае, если значение операнда слева меньше, чем значение операнда справа.

Синтаксис📖:

Примеры:

3 < 4 // истина
5 < 2 // ложь

Введите по очереди примеры в переменную 🔔 bool нашего LIVE EDITOR

function learnJavaScript() { let bool = 3 < 4 return bool. toString() }

Loading…

Больше или равно

>=​

Оператор больше или равно, возвращает🔄 истину в том случае, если значение операнда слева больше или равно значению операнда справа.

Синтаксис📖:

x >= y

Примеры:

4 >= 3 // истина
3 >= 3 // истина

Введите по очереди примеры в переменную 🔔 bool 👇 :

function learnJavaScript() { let bool = 4 >= 3 return bool.toString() }

Loading…

Меньше или равно

<=​

Оператор меньше или равно, возвращает🔄 истину в том случае, если значение операнда слева меньше, или равно значению операнда справа.

Синтаксис📖:

x <= y

Примеры:

3 <= 4 // истина
3 <= 3 // истина

Введите по очереди примеры в переменную 🔔 bool 👇 :

function learnJavaScript() { let bool = 3 < 4 return bool. toString() }

Loading…

Условные конструкции​

Вы, должно быть, думаете: «Ну, все эти булевы-логические штуки — это было очень просто… Наверное, они довольно бесполезны, и используют их нечасто». Как бы не так! Логические значения используются в программировании более чем постоянно и всего чаще — в форме условных конструкций (или выражений).

А что такое «условная конструкция»?​

Хороший вопрос! Условная конструкция — это такое предложение, которое используется для запуска определённых блоков кода📟 согласно заданному условию. Условие (например, при сравнении x === y) всегда возвращает🔄 логическое значение — либо true ✅ , либо false ❎ . Соответственно, если значение true ✅ , то код следует запустить, в противном же случае блок кода📟 следует пропустить. Рассмотрим несколько примеров.

Условные выражения с

if​

Конструкция if выполняет инструкцию1, если условие true ✅, если условие false ❎, то выполняется инструкция2.

Синтаксис📖:

if (условие) {
инструкции1
} else {
инструкции2
}

условие — Выражение, которое является либо истинным, либо ложным.

инструкция1 — Инструкция, выполняемая в случае, если значение условиe истинно true ✅ . Может быть любой инструкцией в том числе и вложенным if. Когда никакого действия не требуется, может использоваться пустая инструкция.

инструкция2 — Инструкция, выполняемая в случае, если значение условиe ложно false❎ . Может быть любой инструкцией, в том числе и вложенным if. Инструкции тоже можно группировать в блок. Измените год в переменной 🔔 whatIsTheYearNow и обратите внимание на вывод.

function learnJavaScript() { let whatIsTheYearNow = 2021 if (whatIsTheYearNow === 2021) { whatIsTheYearNow = true } else { whatIsTheYearNow = false } return whatIsTheYearNow.toString() }

Loading…

if не только с булевыми значениями​

Условные выражения могут работать не только с булевыми значениями, то есть с такими, которые не точно true ✅ или false ❎ Так что мы, в общем-то, спокойно можем использовать их в скобках, как и булевы значения.

  • Все целые числа, кроме нуля — true ✅
  • Cтрока с хотя бы одним символом true ✅
  • Пустая строка — это false ❎

Давайте попробуем, введите значения в переменную 🔔 bool 👇 :

function learnJavaScript() { let bool = 1 if (bool) { bool = true } else { bool = false } return bool. toString() }

Loading…

Операторы сравнения в выражениях с

if​

До сих пор мы с вами имели дело со сравнениями или с условными выражениями с if, но пока мы не использовали их вместе, а ведь они просто созданы🏗️ друг для друга!

function learnJavaScript() { let year = 2021 let output if (year < 2020) { output = ‘меньше 2020’ } else { output = ‘больше 2020’ } return output }

Loading…

Несколько условий

else if​

Иногда, нужно проверить несколько вариантов условия. Для этого используется блок else if. Измените год и смотрите вывод.

function learnJavaScript() { let year = 2021 let output if (year < 2020) { output = ‘меньше 2020’ } else if (year > 2020) { output = ‘больше 2020’ } else { output = ‘равно 2020’ } return output }

Loading…

Логические операторы​

В JavaScript есть три логических оператора: || (ИЛИ), && (И) и ! (НЕ).

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

Давайте рассмотрим их подробнее.

|| (ИЛИ)​

Оператор «ИЛИ» выглядит как двойной символ вертикальной черты:

result = a || b

Традиционно в программировании ИЛИ предназначено только для манипулирования булевыми значениями: в случае, если какой-либо из аргументов true, он вернёт true, в противоположной ситуации возвращается false.

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

Существует всего четыре возможные логические комбинации:

true || true // true
false || true // true
true || false // true
false || false // false

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

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

function learnJavaScript() { let hour = 9 let result = » if (hour < 10 || hour > 18) { result = ‘Магазин закрыт’ } return result }

Loading. ..

&& (И)​

Оператор И пишется как два амперсанда &&:

result = a && b

В традиционном программировании И возвращает true, если оба аргумента истинны, а иначе – false:

true && true // true
false && true // false
true && false // false
false && false // false

Пример с if:

function learnJavaScript() { let hour = 12 let minute = 30 let result = » if (hour === 12 && minute === 30) { result = ‘The time is 12:30’ } return result }

Loading…

! (НЕ)​

Оператор НЕ представлен восклицательным знаком !.

Синтаксис довольно прост:

result = !value

Оператор принимает один аргумент и выполняет следующие действия:

Сначала приводит аргумент к логическому типу true/false. Затем возвращает противоположное значение.

Например:

!true // false
!0 // true

Условный (тернарный) оператор

?​

Единственный оператор в JavaScript, принимающий три операнда: условие, за которым следует знак вопроса ?, затем выражение, которое выполняется, если условие истинно, сопровождается двоеточием :, и, наконец, выражение, которое выполняется, если условие ложно. Он часто используется в качестве укороченного варианта условного оператора if.

Синтаксис📖:

условие ? выражение1 : выражение2

Параметры:

условие — Выражение, принимающее значение true ✅ или false ❎ .

выражение1, выражение2 — Выражения, значения которых могут принадлежать любому типу.

Пример 👇 :

function learnJavaScript() { let age = 20 let output = age > 18 ? ‘Да’ : ‘Нет’ return output }

Loading…

React Native​

Например нам нужно показать индикатор загрузки до тех пор пока дынные с сервера подгружаются, а после после показать эти данные. Пока сэмулируй это изменение вручную и заменим false на true.

Проблемы?​

Пишите в Discord или телеграмм чат, а также подписывайтесь на наши новости

Вопросы:​

Какой синтаксис используется в операторе равно?

  1. x == y
  2. x = y
  3. x -- y

В каком случае оператор не равно возвращает true?

  1. Если операнды не равны
  2. Если операнды равны
  3. Если оба операнда являются объектами

Чем оператор равно отличается от строго равно?

  1. Строго равно не приводит операнды к одному типу
  2. Строго равно приводит операнды к одному типу
  3. Строго равно следит за тем, чтобы значение было идентичным, а тип нет

Какой синтаксис у оператора строго не равно?

  1. !=
  2. !==
  3. ==!

В каком случае оператор больше возвращает ложь?

  1. Если значение левого операнда больше, чем правого
  2. Если значение правого операнда больше, чем левого
  3. Если значения операнд одинаковые

Какой синтаксис у оператора больше или равно?

  1. >=
  2. > =>
  3. > <=

В каком примере оператор меньше или равно вернёт истину?

  1. 4 <= 5
  2. 5 <= 4
  3. 3 <= 2

Что такое условие?

  1. Инструкция
  2. Выражение
  3. Значение

Какой блок используется, чтобы проверить несколько вариантов условия?

  1. else if
  2. if
  3. for

Какой оператор принимает 3 операнда?

  1. Условный (тернарный) оператор
  2. Больше или равно
  3. Меньше или равно

Какой оператор сравнения предпочтительнее для проверки — значения не равны?

  1. ===
  2. !=
  3. !==

Какие два оператора сравнения рекомендуют не использовать в коде?

  1. > и <
  2. == и !=
  3. => и <=

Какой оператор сравнения проверяет, меньше ли значение справа или равно значению слева?

  1. <=
  2. =>
  3. >=

Какие общие инструкции в кодировании используются для выполнения определенных блоков кода на основе заданного условия?

  1. Логическое выражение
  2. Условное выражение
  3. Разные выражения

Какого рода оператор запускается только тогда, когда условие для блока if принимает значение false?

  1. if
  2. else if
  3. else

Операторы сравнения всегда дают значение true или false.

  1. true
  2. false

Иногда внутри оператора else можно использовать операторы сравнения.

  1. true
  2. false

Оператор if / else может использоваться только вне функции.

  1. true
  2. false

Подобно операторам сравнения, операторы ___ (&&, || и !) Отлично работают в условных операторах.

  1. условия
  2. сравнения
  3. логики

Чему равно 53 >= 53 && !(51 <= 52)?

  1. true
  2. false

Если условие в скобках блока if возвращает ложь, какой синтаксис можно использовать для проверки другого условия перед преобразованием в блок else?

  1. else if
  2. if
  3. else

Как называется единственный логический оператор, который всегда возвращает логическое значение? Какой символ у этого логического оператора?

  1. !
  2. ||
  3. &&

Как называется логический оператор, который вернет истинное значение, если оно имеет истинное значение с обеих сторон? Какой символ у этого логического оператора?

  1. ||
  2. &&
  3. оба

Чему равно true || false?

  1. true
  2. false

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

Ссылки:​

  1. MDN web docs — Операторы сравнения
  2. Код для подростков: прекрасное руководство по программированию для начинающих, том 1: Javascript — Jeremy Moritz

Contributors ✨​

Thanks goes to these wonderful people (emoji key):


Dmitriy Vasilev
📖💵
Resoner2005
🐛 🎨 🖋

Присвоение переменной

— приоритет оператора с тернарным оператором JavaScript

Но я не на 100% доволен ни одним из ответов, поскольку все они кажутся неполными. Итак, мы снова исходим из первых принципов:

Общая цель пользователя:

Обобщая код: «Я хочу добавить в строку имя класса с ошибкой , необязательно с начальным пробелом, если имена классов уже есть в строке. Струна.»

Как заметил Коби пять лет назад, начальный пробел в именах классов не вызовет проблем с любыми известными браузерами, поэтому самым коротким правильным решением будет:

 h. className += 'ошибка';

Это должен был быть фактический ответ на актуальную проблему .

Как бы то ни было, заданные вопросы были…

1. Почему это сработало? 

 h.имя_класса += h.className ? 'ошибка' : 'ошибка'

Условный/тернарный оператор работает как оператор if , который присваивает результат своих истинных или ложных путей переменной.

Итак, этот код работал, потому что он оценивается просто как:

 если (h.className НЕ НУЛЕВОЕ И НЕ неопределенное И НЕ ЯВЛЯЕТСЯ '')
    h.className += 'ошибка'
еще
    h.className += 'ошибка'

2. А почему этот сломался? 

 h.className = h.className + h.className ? 'ошибка' : 'ошибка'

В вопросе говорится: «Это выдает [n] ошибку в моей консоли», что может ввести вас в заблуждение, думая, что код не работает . На самом деле следующий код выполняется без ошибки , но он просто возвращает «ошибка», если строка не был пустым и «ошибкой», если строка была пустой и поэтому не соответствовала требованиям .

Этот код всегда приводит к строке, которая содержит только 'ошибка' или 'ошибка' , потому что он вычисляет этот псевдокод:

 if ((h.className + h.className) НЕ НУЛЬ И НЕ НЕ ОПРЕДЕЛЕН И НЕ '')
    h.className = 'ошибка'
еще
    h.className = 'ошибка'

Причина этого в том, что оператор сложения ( + для простого народа) имеет более высокий «приоритет» (6), чем условный/тернарный оператор (15). Я знаю, что числа отображаются в обратном порядке

Приоритет просто означает, что каждый тип оператора в языке оценивается в определенном предопределенном порядке (а не только слева направо).

Ссылка: Приоритет оператора JavaScript

Как изменить порядок оценки:

Теперь мы знаем, почему он не работает, вам нужно знать, как заставить его работать.

Некоторые другие ответы говорят о том, что меняет приоритет , но вы не можете . Приоритет жестко встроен в язык. Это всего лишь фиксированный набор правил… Однако вы можете изменить порядок оценки …

Инструментом в нашем наборе инструментов, который может изменить порядок оценки , является оператор группировки (также известный как скобки). Это достигается за счет того, что выражения в скобках вычисляются за до операций вне скобок. Это все, что они делают, но этого достаточно.

Скобки работают просто потому, что они (операторы группировки) имеют более высокий приоритет, чем все остальные операторы («теперь уровень 0»).

Просто добавляя квадратные скобки, вы изменяете порядок оценки , чтобы убедиться, что условный тест выполняется первым перед простой конкатенацией строк:

 h.className = h.className + (h.className ? ' error' : 'error ')

Тернарный оператор JavaScript — Pi My Life Up

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

Тернарный оператор — невероятно полезный условный оператор, поддерживаемый JavaScript. Используя этот оператор, вы можете вернуть значение в зависимости от того, является ли условие истинным или ложным .

Из всех операторов, поддерживаемых JavaScript, только тернарный оператор имеет три параметра.

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

В следующих нескольких разделах мы покажем вам, как использовать тернарную операцию в JavaScript.

Синтаксис тернарного оператора JavaScript

Как упоминалось ранее, тернарный оператор немного отличается тем, что имеет дело с тремя операндами. Этими операндами являются условие, выражение « true », затем выражение « false ».

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

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

Наконец, тернарный оператор заканчивается выражением, которое будет выполнено, если ваше условие false .

Если бы вы воспроизвели поведение тернарного оператора с оператором « if...else », ваш код выглядел бы так, как показано ниже.

Вы можете видеть, что этот оператор аккуратно сокращает ваш код с четырех до одной строки кода.

Использование тернарного оператора в JavaScript

Теперь, когда мы знаем, как записывается тернарный оператор в JavaScript, давайте покажем вам, как его использовать.

Мы изучим основы использования этого оператора и то, как вы можете связать несколько тернарных операторов вместе.

Основное использование тернарного оператора

В этом примере мы начинаем с объявления переменной с именем « a » и присваиваем ей значение 25 .

Затем мы объявляем переменную с именем « б ». Мы будем использовать тернарный оператор, чтобы указать значение этой переменной, используя простое условие.

Для условия тернарного оператора JavaScript мы используем оператор «меньше» ( < ), чтобы увидеть, меньше ли « a », чем 30 .

  • Если « a » меньше 30 , переменной « b » будет присвоен текст « Было меньше 30 ».
  • Если « b » больше или равно 30 переменной « b » будет присвоен текст « было больше, чем 30 ».

Сценарий заканчивается тем, что мы записываем значение, хранящееся в нашей переменной « b », в консоль с помощью функции « console.log() ».

После запуска приведенного выше кода вы должны получить следующий результат, зарегистрированный на вашей консоли.

Пример, написанный как оператор if

Теперь, если бы вы написали тот же пример на JavaScript, используя условный оператор if вместо тернарного оператора, он выглядел бы так, как показано ниже.

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

Объединение тернарных операторов в цепочки

В JavaScript тернарный оператор также допускает условные цепочки, в которых правостороннее условие связывается с другим тернарным оператором.

Объединяя тернарные операторы в цепочку, вы фактически создаете условную цепочку « if...else if...else ». Но, конечно, вы должны быть осторожны, чтобы объединение тернарных операторов не сделало ваш код менее читабельным.

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

Теперь, когда вы знаете, что в JavaScript можно объединять тернарные операторы, позвольте нам показать вам небольшой пример.

В этом примере мы создаем переменную с именем « a » и присваиваем ей значение 35 . Мы будем использовать эту переменную в обоих наших условиях.

  • Затем мы создаем переменную с именем « b », но JavaScript будет присваивать ей значение с помощью наших связанных тернарных операторов.
  • Первый тернарный оператор проверяет, меньше ли « a » ( < ) 30 . Если значение меньше 30 , то будет присвоен текст « Значение было меньше 30 ».
  • Если значение равно или превышает 30 , оно перейдет ко второму тернарному оператору.
  • С помощью второго тернарного оператора мы проверяем, меньше ли « a », чем 40 . Если значение меньше , будет присвоен текст « Значение меньше 40 ».
  • Если значение больше 40 , то будет присвоен текст « Значение больше 40 ».

JavaScript присвоит результат связанного тернарного оператора нашей переменной « b ». Затем мы записываем переменную « b » в консоль благодаря использованию « console.log() ”функция.

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

 Значение было меньше 40
Пример Написано как оператор if

Ниже вы можете увидеть, как вы могли бы написать связанный тернарный оператор, если бы вместо этого использовали условный оператор « if...else if...else ». .

При объединении тернарных операторов в цепочку вам нужно быть более осторожным в том, как вы их пишете, чтобы не испортить читабельность вашего кода.

Заключение

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

Это единственный условный оператор, поддерживаемый JavaScript, который полезен для установки значения в зависимости от того, истинно или ложно условие.

Пожалуйста, оставьте комментарий ниже, если у вас есть какие-либо вопросы об использовании этого оператора.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *