Преобразование и приведение типов - Не число NaN

Здесь продолжается разговор о приведении типов в JavaScript. Что такое преобразование и приведение типов? В чем их отличие?

Типы и преобразования между ними - это один из фундаментальных аспектов в программировании. Это то, что мы делаем в каждом языке программирования. Например, преобразовываем строку в число, или число в логическое значение. Это то, что мы делаем постоянно. Важно знать об этом, прежде чем двигаться дальше в изучении языка.

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

Преобразование типов (Type Conversion) - это когда мы вручную конвертируем один тип в другой. И другое дело...

Приведение типов (Type Coercion) - это когда Javascript автоматически преобразует типы, и мы этого не видим. Это происходит не явно, выполняется скрытно от нас и это необходимо в некоторых ситуациях. Здесь мы рассмотрим примеры приведения типов в Javascript (частично о преобразовании и приведении типов речь шла в этой статье).



Преобразование типов

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

Допустим, на веб-странице есть поле для ввода, в которое пользователь вводит свой год рождения.

Введенные данные обычно приходят в виде строк.

Пример 1.1

const inputYear = '1991' /* This is string */

Теперь, если мы хотим проделать какие-либо вычисления с этой строкой/с этими данными, то это не будет работать.

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

Пример 1.2

const inputYear = '1991' /* This is string */
console.log(inputYear + 18);

В результате мы получим строку: математического сложения не произойдет.

Какой же выход из подобных ситуаций? Нужен способ конвертации строк в числа.

Преобразование строки в число - Функция Number

Для конвертации строки в число, используется встроенная в JavaScript функция Number. Вот как это делается:

Пример 2.1

const inputYear = '1991'
console.log(inputYear); /* This is string */
console.log(Number(inputYear)); /* This is number */

В консоли строки и числа имеют разный цвет. По умолчанию: число имеет фиолетовый цвет, а строка черный. Если же выбрать темную тему для браузера, то число все также будет иметь фиолетовый цвет, а строка белый. Цвета могут меняться с течением времени, но в любом случае цвет для строк и чисел различный.

Что же касается функции Number, то, что такое функция и почему это работает именно так, мы будем изучать в следующем разделе.

Сейчас нужно знать лишь, что для конвертации строки в число используется функция Number - так как это было продемонстрировано в примере выше.

Number(inputYear) - эта операция возвращает строку в виде числа или: функция Number преобразует переданное значение в число.

И, соответственно, любые вычисления с исходной переменной проводятся, как со строкой:

Пример 2.2

const inputYear = '1991'
console.log(inputYear); /* This is a string */
console.log(Number(inputYear)); /* This is a number */
console.log(inputYear + 18); /* It's still a string */

Результат

Если же сделать так:

Пример 2.3

const inputYear = '1991'
console.log(inputYear); /* This is a string */
console.log(Number(inputYear) + 18); /* This is a number */

Результат

В результате произошло математическое сложение. Исходное значение преобразовано в число.

Не число NaN - Преобразование строки в число

С преобразованием строк, содержащих числовые значения все довольно просто.

Если же пробовать преобразовать в число что-либо другое, например строку, которая не содержит число, то это не возможно будет конвертировать:

Пример 3.1

console.log(Number('Marry'));

Результат

NaN

В результате JavaScript нам выдал NaN вместо, возможно, ожидаемого числового значения. NaN означает не число.

Javascript выдает нам NaN, а не числовое значение всякий раз, когда операция, включающая числа, не дает нового числа (NaN - Javascript gives us this, not a number value whenever an operation that involves numbers fails to produce a new number - немного запутанный перевод, но дальше должно быть все ясно).

NaN (не число) означает недопустимое/недействительное число.

И сейчас мы будем рассматривать утверждение, что NaN не действительное число или не число. Продемонстрируем, как ведет себя NaN.

Мы можем проверить, к какому типу данных относится не число NaN? Воспользуемся оператором typeof.

Пример 3.2

console.log(typeof (NaN));

Результат

number

Результат оказался неожиданным - number. Это означает, что NaN (не число) в действительности является числом, так как относится к числовому типу данных.

Но опять же NaN (no a number) "не число" в действительности означает invalid number (invalid - недействительный, invalid number - недопустимое число) недопустимое/недействительное число.

Итак, NaN почему-то все еще число/какое-то число, так как относится к числовому типу данных number, но оно недействительное (it's still a number of somehow, but it's an invalid one).

Еще раз: мы получаем не число, когда операция с числами не может дать нам новое число (we get not a number whenever an operation involving numbers fails to give us a new number).

Функция String - Преобразование чисел в строки

Изложенный выше материал касался преобразования строк в числа. Конечно же, мы можем делать противоположные операции: преобразовывать числа в строки. Условно можно сказать, что это чуть менее важно, чем конвертация строк. Но давайте посмотрим, как это работает.

Для преобразования в строку, используется встроенная в JavaScript функция String:

Пример 4.1

console.log(String(33));

Результат

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

Для наглядности сделаем так:

Пример 4.2

console.log(String(33), 33);

Результат

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

Итак, здесь мы занимались преобразованием строк и чисел друг в друга. Но не было работы с логическим типом данных. Потому что булевы значения ведут себя особым образом. Для этого существует отдельная лекция, посвященная "истинным" и "ложным" значениям.

Это был материал о преобразовании типов, где мы вручную конвертировали один тип данных в другой.

Приведение типов

На практике, не всегда преобразование типов нужно делать вручную. Во многих ситуациях Javascript делает это за нас - преобразование типов происходит автоматически. Это называется «Приведением типов»

Об этом пойдет речь далее.

В основном приведение типов происходит всякий раз, когда работа проводится с двумя переменными, относящимися к различным типам данных. Тогда Javascript будет за кулисами преобразовывать одно из значений, чтобы оно соответствовало другому значению так чтобы, в конце концов, операция была выполнена.

В действительности, если об этом задуматься мы всегда "видим" (т.е. это можно понять), что происходит. Далее рассмотрим примеры приведения типов.

Сложение - Преобразование чисел в строки

О сложении чисел и строк уже шла речь. Тем не менее, начнем именно с этого:

Пример 5.1

console.log('I am ' + 23 + ' years old');

Результат

В итоге мы видим строку 'I am 23 years old' - это ожидаемый результат. Но все же не лишним будет повторить, как это работает?

Итак, в примере мы имеем дело с различными типами данных. 'I am', 'years old' - это строки, а 23 - это число. JavaScript совмещает строки с числом и выдает результат в виде единой строки. Происходит это благодаря приведению типов - при этом JavaScript автоматически преобразует типы из одного в другой.

Благодаря приведению типов следующие две записи идентичны:

Пример 5.2

console.log('I am ' + 23 + ' years old');
console.log('I am ' + '23' + ' years old');

Итак, еще раз: оператор сложения (плюс "+") конвертирует число в строку. То же самое происходит в шаблонных литералах, где все числовые значения преобразуются в строки.

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

Пример 5.3

console.log('I am ' + String(23) + ' years old');

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

Вычитание - Преобразование строк в числа

Не все операторы способствуют тому, что приведение типов конвертирует числа в строки. Рассмотрим пример с вычитанием.

Пример 6.1

console.log('23' - '10' - 3);

Результат

В этом примере JavaScript преобразовал строки в числа. Это означает, что оператор минус способствует обратному преобразованию: при вычитании происходит конвертация строк в числа.

И если же в примере использовать плюс:

Пример 6.2

console.log('23' + '10' + 3);

Результа

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

Умножение и деление - Преобразование строк в числа

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

Пример 7.1

console.log('23' * '2');

Результат

И пример с делением.

Пример 7.2

console.log('46' / '2');

Результат

Логические значения - Преобразование строк в числа

Рассмотрим пример с логическими значениями.

Пример 8.1

console.log('23' > '18');

Результат

true

Строка '23' больше строки '18' и это 'Истина', так как число 23 больше чем 18. В этом примере JavaScript все также автоматически конвертирует строки в числа.

Примеры приведения типов

Для укрепления пройденного материала рассмотрим примеры приведения типов.

Пример 9.1

let n = '1' + 1;
n = n - 1;
console.log(n);

Результат

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

let n = '1' + 1; - здесь вторая единица конвертируется в строку '1' и в итоге будет получена строка '11'.

n = n - 1; - здесь строка '11' преобразуется в число 11 ,поэтому в результате мы увидим число 10.

Пример 9.2

console.log(2 + 3 + 4 + '5');

Результат

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

Пример 9.3

Если же сделать так:

console.log('5' + 2 + 3 + 4);

Результат будет иным:

Пример 9.4

console.log('10' - '4' - '3' - 2 + '5');

Результат

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

Многие люди не знают об автоматическом преобразовании типов или считают плохой практикой полагаться на приведение типов. Одна из причин этого заключается в том, что, по их мнению, приведение типов может на самом деле привнести много непредвиденных ошибок в код программы.

Однако это может произойти только тогда, когда мы действительно не понимаем и не знаем что делаем, когда мы не знаем материала, представленного в этой статье. Если же вам известно как происходит приведение типов в JavaScript, то вы легко избежите вероятных ошибок.

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

Читайте также...

site.komp36.ruТвой сайт фотографа. Создание сайтов Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.

Узнать больше

site.komp36.ru Акция Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов

Узнать больше

site.komp36.ru Акция Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта

Узнать больше