Далее на странице...
До этого момента мы имели дело только с операторами сравнения, которые использовались для принятия решений при работе с конструкциями if-else. При этом преимущественно использовался оператор >= больше или равно.
Но давайте предположим, что у нас есть два значения. И вместо того, чтобы сравнивать их: одно больше или меньше другого, нам нужно проверить, равны ли между собой эти значения.
Для этого существую различные операторы равенства.
Допусти есть переменная age = 18. Это возраст. Составим которое будет выводить в консоль строку, если человек стал взрослым, то есть только в том случае, если возраст равен именно 18 годам.
Для этого в используется тройное равенство "===".
Оператор равенства - Три знака равно
Рассмотрим пример использования оператора тройного равенства в JavaScript и потом прокомментируем его.
Пример 1.1
const age = 18;
if (age === 18) {
console.log('You just became an adult');
}
Результат
You just became an adult
You just became an adult - Ты только что стал взрослым.
Блок if в одну строку
Оптимизируем код примера 1.1
Всякий раз, когда блок if имеет одну строку, мы можем не использовать фигурные скобки. Нам не нужно создавать этот блок {}, если мы работаем только с одной строкой. Мы можем опустить фигурные скобки. И записать все в одну строку.
Пример 1.2
const age = 18;
if (age === 18) console.log('You just became an adult');
Результат
You just became an adult
Если же переменная age = 19, то 19 уже не равно 18. И мы не увидим результата.
Пример 1.3
const age = 19;
if (age === 18) console.log('You just became an adult');
Результат
Как работает тройной оператор равенства
Но вернемся к примеру 1.2. Как работает тройной оператор равенства в JavaScript? По сути, так же, как и операторы сравнения.
Оператор равенства будет возвращать истину или ложь или , то есть булево значение. И будет результатом работы этого оператора только в том случае, если обе стороны равенства содержат одно и то же.
Для удобства можно перейти непосредственно в консоль и продемонстрировать еще раз работу оператора тройного равенства.
18 === 18
true
18 === 19
false
Не стоит путать присваивание, которое представляет собой лишь один знак равенства "=" с оператором сравнения, который представляет собой тройное равенство "===".
Двойное равенство ==
Кроме тройного равенства, в JavaScript существует еще двойное равенство "==" - два знака равно.
Разница в том, что тройное равенство является оператором строгого равенства (strict - строгий). Потому что при этом не выполняется приведение типов. Оператор строго равенства возвращает только, когда оба значения идентичны/точно такие же.
С другой стороны существует свободный оператор равенства (loose - свободный), который имеет только два знака равно.
Свободный оператор равенства == (два знака равно) проводит приведение типов. Вернемся снова в консоль.
Пример 2.1
'18' == 18
true
Сравнение строки '18' и числа 18 дает true.
Итак, еще раз двойное равенство проводит приведение типов. Это означает, что строка '18' в примере конвертируется в число 18. Поэтому 18 равно 18 и это истина .
И, как уже упоминалось, тройное равенство не проводит приведение типов. Продолжим работать с примером:
Пример 2.2
'18' === 18
false
Та же ситуация, что и в примере 2.1, но с оператором строго равенства и мы видим false. Потому что строка '18' конечно же, отлична от числа 18. Это не одно и то же и в этом случае JavaScript не конвертировал ни одной из значений.
Продолжим работать с примером №1
Пример 1.4
const age = 18;
if (age === 18) console.log('You just became an adult (strict)');
if (age == 18) console.log('You just became an adult (loose)');
Результат
You just became an adult (strict)
You just became an adult (loose)
В первом условии используется оператор строгого равенства, во втором двойное равенство. И в обоих случаях мы видим один и тот же результат, потому что оба условия возвращают .
Пример 1.5
Если же в качестве значения переменной age будет строка '18', то мы увидим иной результат:
const age = '18';
if (age === 18) console.log('You just became an adult (strict)');
if (age == 18) console.log('You just became an adult (loose)');
Результат
You just became an adult (loose)
Только условие с оператором двойного равенства вернуло . Так как при этом строка '18' была преобразована в число 18. Условие с оператором строго равенства вернуло false.
Всегда строгое равенство ===
Надеемся, что это не было запутанным для Вас. Ведь это довольно не простая тема в JavaScript. Потому что свободный оператор двойного равенства полон действительно странных правил и моделей поведения.
Это означает, что использование оператора двойного равенства может привести к появлению многих труднодоступных ошибок в вашем коде.
Поэтому одним из главных правил написания чистого кода является: избегать использовать оператор двойного равенства насколько это возможно.
Итак, при сравнении значений всегда используйте строгое равенство с тремя знаками равно. Большинство JavaScript разработчиков рекомендуют делать именно так. Это, несомненно, хорошее правило.
Если же вам действительно нужно преобразование типов, в этом случае делается ручная конвертация значений перед их сравнением. Это будет лучшим шагом, чем полагаться на оператор двойного равенства.
Некоторые всегда по умолчанию используют тройной оператор равенства и делают вид, что это единственный из существующих вариантов. Так будем делать и мы. Хотя о двойном операторе равенства мы еще поговорим.
Далее рассмотрим другие примеры.
Примеры использования двойного и тройного равенства
Рассмотрим пример, когда значения приходят с веб-страницы. Для этого мы будем использовать функцию prompt (понятие функций мы будем рассматривать в следующем разделе).
Пример 3.1
prompt('What is your favorite number?');
Этот код будет вызывать окно с полем для ввода информации.
В нашем случае требуется ввести какое-либо число и затем нажать ОК. 'What is your favorite number?' - Какое твое любимое число?
По сути, эта строка prompt('What is your favorite number?'); создает значение - то, которое мы введем. Но нужно это значение куда-то записать. Для этого данную строку нужно присвоить переменной.
Пример 3.2
const favorite = prompt('What is your favorite number?');
console.log(favorite);
console.log(typeof favorite);
Таким образом, переменная favorite будет содержать значение, которое мы введем в поле для ввода, вызванное функцией prompt. Это значение можно как-то использовать. Например, вывести его в консоль.
string
Но обратите внимание: введенное число 23 имеет белый цвет в консоли. Как вы помните, это означает, что это строка. В примере, при помощи оператора typeof, мы сразу сделали проверку и увидели, к какому типу данных относится введенное число. Еще раз - это строка.
Теперь немного логики: ведь нам нужно число, а не строка.
Пример 3.3
const favorite = prompt('What is your favorite number?');
console.log(favorite);
console.log(typeof favorite);
if (favorite == 23) { // '23' == 23 -> TRUE
console.log('Cool! 23 is a number');
}
Результат
string
Cool! 23 is a number
В результате выполнения этого кода мы видим сообщение о том, что 23 это число. Хотя сначала мы получаем строку. Почему так происходит? Ответ прост: при использовании оператора двойного равенства происходит приведение типов. И в результате в условии блока if строка '23' конвертируется в число 23.
Если же использовать оператор строго равенства с тремя знаками равно, то этот код работать не будет.
Пример 3.4
const favorite = prompt('What is your favorite number?');
console.log(favorite);
console.log(typeof favorite);
if (favorite === 23) { // '23' === 23 -> FALSE
console.log('Cool! 23 is a number');
}
Результат
string
При использовании оператора строго равенства в JavaScript не происходит приведения типов. Строка '23' не равна числу 23.
Пример 3.5
В этой статье уже шла речь о том, что при сравнении значений рекомендуется всегда использовать строгое равенство с тремя знаками равно. Поэтому в примере для преобразования строки в число необходимо использовать функцию Number.
const favorite = Number(prompt('What is your favorite number?'));
console.log(favorite);
console.log(typeof favorite);
if (favorite === 23) { // 23 === 23 -> TRUE
console.log('Cool! 23 is a number');
}
Результат
number
Cool! 23 is a number
В результате мы снова видим строку Cool! 23 is a number. Только теперь в отличие от примеров выше мы сразу имеем дело с числом 23: это видно и по цвету числа и по типу данных number. И в итоге оператор тройного равенства это также подтверждает.
Пример 3.6
Пробуем в поле для ввода ввести другое число, например 22:
const favorite = Number(prompt('What is your favorite number?'));
console.log(favorite);
console.log(typeof favorite);
if (favorite === 23) { // 22 === 23 -> FALSE
console.log('Cool! 23 is a number');
}
Результат
number
Здесь мы имеем дело с числом 22, но оно не равно 23, поэтому код блока if не работает.
Несколько условий одновременно
Здесь мы переходим к следующему шагу, в котором добавим больше условий в конструкции if-else. Несколько условий в JavaScript - читайте об этом здесь.
Пока что/до этого момента, после блока if всегда следовал блок else. Но мы можем добавить еще блок if. Это работает так: после первого блока if пишется else, а потом снова ключевое слово if.
Пример 4.1
const favorite = Number(prompt('What is your favorite number?'));
console.log(favorite);
console.log(typeof favorite);
if (favorite === 23) {
console.log('Cool! 23 is a number');
} else if (favorite === 7) { // second 'if'
console.log('7 is also cool number')
} else {
console.log('Number is not 23 or 7');
}
Результат
В целом такая конструкция с несколькими блоками if (с несколькими условиями) работает так: сначала выполняется проверка условия первого блока if. Если первая проверка не проходит, выполняется проверка условия второго блока if. Если эта проверка проходит, то выполняется код второго блока if.
В конце, после второго блока if мы можем добавить блок else, как это сделано в примере выше. Или же добавить еще один блок if - смотрим пример ниже.
Пример 4.2
const favorite = Number(prompt('What is your favorite number?'));
console.log(favorite);
console.log(typeof favorite);
if (favorite === 23) {
console.log('Cool! 23 is a number');
} else if (favorite === 7) {
console.log('7 is also cool number')
} else if (favorite === 11) {
console.log('11 is also cool number')
} else {
console.log('Number is not 23 or 7 or 11');
}
Результат
Итак, в таких конструкциях, при составлении нескольких условий, блок else выполняется в последнюю очередь. Сначала проверяются все условия в блоках if, и если ни одно из них не является истинным, только тогда выполняется блок else.
На практике подобные конструкции if-else с составлением нескольких условий (несколько блоков if), время от времени используются.
Операторы неравенства
В конце этой заметки, рассмотрим оператор неравенства. Ранее мы говорили об операторе равно/равенства. Но, конечно же, должен быть оператор, который работает в обратном порядке. Итак, это оператор неравенства. И теперь давайте проверим иным способом, что если переменная favorite отлична от числа .
Для этого используется восклицательный знак и двойное равенство !==. Это является строгой версией оператора неравенства. Есть также и свободная версия с одним знаком равно !=.
Но как и в ситуации со знаком равенства свободной версии == (два знака равно) и строгой версии === (три знака равно): при использовании знака неравенства так же стоит придерживаться строгой версии !==.
Пример 4.3
const favorite = Number(prompt('What is your favorite number?'));
console.log(favorite);
console.log(typeof favorite);
if (favorite === 23) {
console.log('Cool! 23 is a number');
} else if (favorite === 7) {
console.log('7 is also cool number')
} else if (favorite === 11) {
console.log('11 is also cool number')
}
else {
console.log('Number is not 23 or 7 or 11');
}
if (favorite !== 23) console.log('Why not 23?');
Результат
11
number
11 is also cool number
Why not 23?
Здесь при помощи оператора строго неравенства !== была добавлена еще одна проверка: это еще один блок if с условием: (favorite !== 23). Если введенное значение не равно 23, то мы увидим строку "Why not 23?".
Итак, при составлении условий в JavaScript используется как оператор строго равенства ===, так и строго неравенства !==. Просто выбирайте, что вам нужно для решения тех или иных задач.
Свободные операторы равенства == и неравенства != используются реже. И с ними стоит быть очень внимательными.
