Закон абсолюту: робота з Math.abs, parseInt і parseFloat в JavaScript

19

Від автора: працювати з числами в 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() вкрай корисні. Досить потужні функції з певним рівнем інтелекту. Тим не менш, необхідно перевіряти діапазон распарсеных значень, щоб їх можна було використовувати в подальшій роботі.