LearnJS

parseFloat()

parseFloat() - это встроенная функция JavaScript, которая пытается получить дробное число из переданного значения.

Она похожа на parseInt(), но не отбрасывает дробную часть. Например, из строки ‘19.95px’ можно получить число 19.95.

let price = '19.95px';
let numberPrice = parseFloat(price);

console.log(numberPrice);
console.log(typeof numberPrice);

Результат:

19.95
number

То есть parseFloat() прочитал число в начале строки и вернул его как тип number.

Что такое parseFloat()

parseFloat() разбирает значение слева направо и пытается достать из него число с дробной частью.

console.log(parseFloat('10.5'));
console.log(parseFloat('10.5px'));
console.log(parseFloat('10.5 кг'));

В консоли будет:

10.5
10.5
10.5

Во всех трех примерах строка начинается с числа 10.5, поэтому функция смогла его получить.

Если дробной части нет, parseFloat() вернет обычное целое число.

console.log(parseFloat('25'));
console.log(parseFloat('25px'));

Результат:

25
25

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

let value = '12.5px';
let result = parseFloat(value);

console.log(value);
console.log(result);

Результат:

12.5px
12.5

Синтаксис

Общая запись выглядит так:

parseFloat(value);

value - значение, из которого нужно получить число.

let weight = parseFloat('2.5');

console.log(weight);

Результат:

2.5

У parseFloat() нет второго аргумента с системой счисления. В этом он отличается от parseInt(), где мы часто пишем parseInt(value, 10).

Как parseFloat() читает строку

parseFloat() читает строку с начала. Если в начале есть пробелы, он их пропускает. Затем берет число до первого символа, который уже не подходит для записи числа.

console.log(parseFloat('   3.14px'));
console.log(parseFloat('12.5 minutes'));
console.log(parseFloat('99.9%'));

Результат:

3.14
12.5
99.9

Как только JavaScript встречает неподходящий символ, чтение останавливается.

console.log(parseFloat('12.5abc30'));

Результат:

12.5

Строка начинается с 12.5, потом идет буква a. На ней parseFloat() остановился, поэтому часть 30 уже не учитывается.

Знак минуса и знак плюса тоже учитываются:

console.log(parseFloat('-7.5px'));
console.log(parseFloat('+2.25em'));

Результат:

-7.5
2.25

Дробные числа

В JavaScript дробная часть записывается через точку, а не через запятую.

console.log(parseFloat('10.5'));
console.log(parseFloat('0.25'));

Результат:

10.5
0.25

Если написать число через запятую, parseFloat() остановится на запятой и возьмет только целую часть.

console.log(parseFloat('10,5'));

Результат:

10

Для JavaScript запятая не является разделителем дробной части. Поэтому в коде пишем 10.5, а не 10,5.

Если в строке несколько точек, parseFloat() прочитает число до второй точки.

console.log(parseFloat('10.5.7'));

Результат:

10.5

Чем отличается от parseInt()

parseInt() получает целое число, а parseFloat() может сохранить дробную часть.

console.log(parseInt('19.95px', 10));
console.log(parseFloat('19.95px'));

Результат:

19
19.95

parseInt() остановился на точке и вернул только 19. parseFloat() прочитал дробное число целиком.

Если нужно количество штук, возраст или номер страницы, чаще подойдет parseInt(). Если нужна цена, вес, процент, ширина с дробной частью или любое другое дробное значение, удобнее использовать parseFloat().

Чем отличается от Number()

Number() требует, чтобы вся строка была похожа на число.

console.log(Number('19.95'));
console.log(Number('19.95px'));

Результат:

19.95
NaN

Строка ‘19.95px’ не является обычным числом, потому что в конце есть px. Поэтому Number() возвращает NaN.

parseFloat() в такой ситуации берет число из начала строки и останавливается перед лишними символами.

console.log(parseFloat('19.95'));
console.log(parseFloat('19.95px'));

Результат:

19.95
19.95

Поэтому parseFloat() удобно использовать для строк вроде ‘12.5px’, ‘7.25em’, ‘99.9%’, если нам нужно именно число в начале строки.

Но если нужно проверить, что вся строка является числом, parseFloat() может быть слишком мягким.

console.log(parseFloat('100px'));
console.log(Number('100px'));

Результат:

100
NaN

parseFloat() и prompt()

prompt() всегда возвращает строку. Если пользователь должен ввести дробное число, результат можно преобразовать через parseFloat().

let price = prompt('Введите цену товара');
let numberPrice = parseFloat(price);

console.log(numberPrice);
console.log(typeof numberPrice);

Если пользователь введет 149.99, в переменной numberPrice будет уже число.

Можно записать короче:

let price = parseFloat(prompt('Введите цену товара'));

console.log(price);

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

Еще пример с расчетом:

let price = parseFloat(prompt('Введите цену'));
let count = parseInt(prompt('Введите количество'), 10);

console.log(price * count);

Здесь цена может быть дробной, поэтому для нее используем parseFloat(). Количество товаров обычно целое, поэтому для него подойдет parseInt().

Когда получится NaN

parseFloat() возвращает NaN, если не смог найти число в начале значения.

console.log(parseFloat('JavaScript'));
console.log(parseFloat('px12.5'));
console.log(parseFloat(''));

Результат:

NaN
NaN
NaN

В первом примере строка начинается с буквы, во втором - тоже не с числа, в третьем строка пустая. Поэтому получить число не получилось.

Пробелы в начале не мешают, но если после пробелов нет числа, результат тоже будет NaN.

console.log(parseFloat('   '));
console.log(parseFloat('   text'));

Результат:

NaN
NaN

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

Когда не стоит использовать parseFloat()

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

Если нужно получить только целое число, используем parseInt().

console.log(parseFloat('10.9px'));
console.log(parseInt('10.9px', 10));

Результат:

10.9
10

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

console.log(Math.round(10.9));
console.log(Math.floor(10.9));
console.log(Math.ceil(10.1));

Результат:

11
10
11

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

console.log(parseFloat('15.5px'));
console.log(Number('15.5px'));

Результат:

15.5
NaN

Итого

parseFloat() помогает получить число из начала строки и сохранить дробную часть. Он пропускает пробелы, учитывает знак + или -, читает цифры и точку, а затем останавливается на первом неподходящем символе.

parseFloat(value);

Главное запомнить: дробная часть в JavaScript пишется через точку, parseFloat() не округляет числа и возвращает NaN, если число не найдено в начале значения.