Від автора: працювати з числами в JavaScript може бути важко. Отримані значення не завжди потрапляють у очікувані рамки. Буває, що ви можете отримати від’ємне число в той час, як очікували позитивне. Іноді це може бути навіть не кількість. Конвертацією рядків в числовий формат і обробкою ось таких умов часто займаються метод Math.abs і функції parseInt і parseFloat.
Метод Math.abs()
Метод Math.abs() повертає абсолютне значення числа, тобто додатне число. Від’ємні числа перетворюються в позитивні. Корисно, коли результат може бути негативним, а вам потрібно позитивне число. В консолі:
var newVal = -57.64;
Math.abs(newVal);
> 57.64
Math.abs(0) завжди поверне 0, -Math.abs(num) (зі знаком мінус на початку) завжди поверне негативне число від переданого.
Функція parseInt
Як я говорив вище, JS розпізнає значення типу «15» як рядки, не числа. Досить часто при парсингу CSS коду за допомогою JS можна отримати число, записане у вигляді рядка. Також рядок можна отримати з погано підготовленого масиву. Результат не завжди може бути такою. Іноді можна отримати рядок «17px». Реальна складність у тому, як правильно конвертувати такий запис у значення, яке можна використовувати в обчисленнях.
Конвертацією тексту з числами в просто числа займається функція очищення parseInt. Текст, переданий в parseInt завжди повинен йти з основою системи числення. У більшості випадків система числення буде 10 (т. е. система числення звичайних чисел, з якими ви працюєте кожен день). Однак не у всіх браузерах ця система вказана за замовчуванням, її потрібно вказувати вручну.
В попередньому прикладі, в якому я обертав елемент по дотику до екрану і положення курсору миші, я знайшов центр елемента за допомогою наступного коду:
var elem = document.getElementById(“elem1”)
var centerPoint = window.getComputedStyle(elem).transformOrigin;
В змінну centerPoint може потрапити результат типу: 75px 75px
Такий результат можна розбити за знаком пробіл за допомогою методу split():
var centers = centerPoint.split(” “),
…але у нас залишається px в кожному рядку. Для очищення ми скористаємося функцією parseInt():
var centerX = parseInt(centers[0], 10);
…де 10 – підставу системи числення. В результаті ми отримуємо просто число 75. Отримане число можна використовувати для обчислень в JS.
Функція parseFloat
Функція parseFloat – еквівалент parseInt, тільки з плаваючою точкою: функція перетворює текст в число з плаваючою точкою. Вона може стати в нагоді при парсингу CSS, особливо при роботі з відсотками з плаваючою точкою:
var FP = “33.33333%”;
console.log(parseFloat(FP));
> 33.33333
Зауважте, що parseFloat не вимагає запису і не використовує основа системи числення.
Висновок
Функції parseInt() і parseFloat() вкрай корисні. Досить потужні функції з певним рівнем інтелекту. Тим не менш, необхідно перевіряти діапазон распарсеных значень, щоб їх можна було використовувати в подальшій роботі.
