Посібник по JavaScript

Нерідко виникає необхідність перетворити одні дані в інші. Деякі перетворення javascript виконує автоматично. Наприклад:

const number1 = "56";
const number2 = 4;
cont result = number1 + number2;
console.log(result); // 564

Тут константа number1 представляє рядок, а точніше строкове представлення числа. А константа number2 представляє число. І в підсумку ми отримаємо не число 60, а рядок 564.

Під час додавання перетворення в JavaScript відбуваються за принципом:

• Якщо обидва операнди представляють числа, то відбувається звичайне арифметичне додавання
• Якщо попередня умова не виконується, то обидва операнди перетворюються на рядки і відбувається об'єднання рядків.

Відповідно в прикладі вище, оскільки перший операнд - рядок, то другий операнд - число також перетворюється на рядок, і в підсумку отримуємо рядок "564", а не число 60. Фактично ми отримуємо:

const number1 = "56";
const number2 = 4;
const result = number1 + String(number2);
console.log(result); // 564

Вираз String(number2) дає змогу отримати строкове представлення константи number2, тобто з числа 4 отримує рядок "4".

Але поведінка за замовчуванням не завжди може бути бажаною. Наприклад, у прикладі вище ми хочемо, щоб значення складалися не як рядки, а як числа. У цьому випадку ми можемо використовувати функції перетворення.

parseInt()

Для перетворення рядка в ціле число застосовується функція parseInt():

const number1 = "56";
const number2 = 4;
const result = parseInt(number1) + number2;
console.log(result); // 60

При цьому рядок може мати змішаний вміст, наприклад, "123hello", тобто в цьому випадку є цифри, але є і звичайні символи. Функція parseInt() все одно спробує виконати перетворення - вона послідовно, починаючи з першого символу, зчитує цифри, поки не зустріне перший нецифровий символ:

const num1 = "123hello";
const num2 = parseInt(num1);
console.log(num2); // 123

Варто враховувати, що перетворюване значення, яке перетворюється на число, завжди спочатку перетворюється на рядок. Це може призводити до несподіваних, на перший погляд, результатів:

const number1 = parseInt(0.000005); // 0;
console.log(number1);
const number2 = parseInt(0.0000005); // 5
console.log(number2);

Вище у функцію parseInt передаються дробові числа, і ми очікуємо в обох випадках отримати число 0. Однак при перетворенні number2 ми отримуємо число 5. Чому?

Приклад вище буде еквівалентний наступному:

const number1 = parseInt(String(0.000005)); // 0;
console.log(number1);
const number2 = parseInt(String(0.0000005)); // 5
console.log(number2);

Для дробових чисел, менших за 10^-6 (0.000001), застосовується експоненційний запис, тобто число 0.0000005 подається як 5e-7:

console.log(0.0000005); // 5e-7

Далі число 5e-7 перетворюється в рядок "5e-7", і цей рядок parseInt намагається перетворити в число. Відповідно на виході виходить число 5.

Те саме стосується дуже великих чисел типу 999999999999999999999, які також подаються до експоненціальної форми.

NaN та isNaN

Якщо функції parseInt() не вдасться виконати перетворення, то вона повертає значення NaN (Not a Number), яке свідчить про те, що рядок не є числом і не може бути перетворений.

console.log(parseInt("abc")); // NaN
cont type = typeof NaN;
console.log(type); // number

Що цікаво, саме значення NaN (не число) представляє тип number, тобто число.

За допомогою спеціальної функції isNaN() можна перевірити, чи представляє рядок число. Якщо рядок не є числом, то функція повертає true, якщо це число - то false:

const num1 = "javascript";
const num2 = "22";
let result = isNaN(num1);
console.log(result); // true - num1 не є числом
result = isNaN(num2);
console.log(result); // false - num2 - це число

parseFloat

Для преобразования строк в дробные числа применяется функция parseFloat(), которая работает аналогичным образом:

const number1 = "46.07";
const number2 = "4.98";
let result = parseFloat(number1) + parseFloat(number2);
console.log(result); //51.05

Преобразование из строки в число и оператор +

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

const number1 = "56";
const number2 = 4;
const result = +number1 - number2;
console.log(result); // 52

Здесь выражение +number1 превращает строку "56" в число 56.

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

const number1 = "56";
const number2 = 4;
const result = -number1 - number2; // -56 - 4 = -60
console.log(result); // -60

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

const number1 = "56hek";
console.log(+number1); // NaN