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

parseFloat() читает дробное число из строки.

Это глобальная функция JavaScript. Она полезна, когда нужно вытащить число из начала строки и сохранить дробную часть.

Синтаксис

parseFloat(string)

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

В отличие от parseInt(), у parseFloat() нет аргумента radix.

Что делает parseFloat()

parseFloat() идёт по строке слева направо и читает число, пока встречает подходящие символы.

console.log(parseFloat("123"));    // 123
console.log(parseFloat("3.14"));   // 3.14
console.log(parseFloat("42.5px")); // 42.5

Как только функция натыкается на неподходящий символ, чтение останавливается.

Что возвращает parseFloat()

Если число удалось прочитать, parseFloat() возвращает значение типа number.

Если не удалось, результатом будет NaN.

console.log(parseFloat("3.14"));   // 3.14
console.log(parseFloat("hello"));  // NaN
console.log(parseFloat(""));       // NaN

Проверять NaN лучше через Number.isNaN():

const result = parseFloat("hello");

console.log(Number.isNaN(result)); // true

Дробная часть сохраняется

Это главное отличие от parseInt().

console.log(parseFloat("3.14")); // 3.14
console.log(parseInt("3.14", 10)); // 3

parseFloat() умеет читать число с точкой, а parseInt() берёт только целую часть.

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

Начальные пробелы игнорируются.

console.log(parseFloat("   42.5")); // 42.5

Если строка начинается не с числа

Если в начале строки нет корректного числового фрагмента, результатом будет NaN.

console.log(parseFloat("hello3.14")); // NaN
console.log(parseFloat("px42"));      // NaN
console.log(parseFloat("."));         // NaN

parseFloat() умеет читать exponent notation

Функция понимает запись вида 1.23e2.

console.log(parseFloat("1.23e2"));   // 123
console.log(parseFloat("1.23e2px")); // 123

Это полезно знать, если числа приходят в научной записи.

Infinity

parseFloat() умеет читать Infinity и -Infinity.

console.log(parseFloat("Infinity"));  // Infinity
console.log(parseFloat("-Infinity")); // -Infinity

parseFloat() и Number()

Эти функции часто путают, но работают они по-разному.

console.log(parseFloat("3.14px")); // 3.14
console.log(Number("3.14px"));     // NaN

parseFloat() читает число только из начала строки.

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

Ещё пример:

console.log(parseFloat("")); // NaN
console.log(Number(""));     // 0

Поэтому Number() обычно строже, а parseFloat() полезнее для частичного чтения.

parseFloat() и parseInt()

Обе функции читают число из начала строки, но:

parseInt() читает только целую часть
parseFloat() умеет читать дробную часть

console.log(parseInt("42.9", 10)); // 42
console.log(parseFloat("42.9"));   // 42.9

Если важны числа после точки, нужен именно parseFloat().

Нет radix, и это важно

У parseFloat() нет второго аргумента с основанием системы счисления.

Он не подходит для двоичных или шестнадцатеричных строк так, как это делает parseInt() с radix.

console.log(parseFloat("0x10")); // 0
console.log(Number("0x10"));     // 16

Это может выглядеть неожиданно, если ожидать универсальный парсер числа.

parseFloat() и нестроковые значения

Функция сначала приводит аргумент к строке, а потом пытается читать число.

console.log(parseFloat(15.99));    // 15.99
console.log(parseFloat(["3.14"])); // 3.14
console.log(parseFloat(true));     // NaN
console.log(parseFloat(null));     // NaN

На практике parseFloat() почти всегда используют именно со строками.

Когда это полезно

parseFloat() удобно использовать, когда:

нужно вытащить дробное число из начала строки
в строке после числа могут идти другие символы
нужно сохранить дробную часть

Пример:

const width = "12.5rem";
const value = parseFloat(width);

console.log(value); // 12.5

Частые ошибки

Думать, что parseFloat() требует, чтобы вся строка была числом

console.log(parseFloat("3.14px")); // 3.14

Функция читает только начало строки.

Путать parseFloat() и Number()

console.log(parseFloat("")); // NaN
console.log(Number(""));     // 0

Это одна из самых частых путаниц.

Пытаться передать radix

// parseFloat("101", 2)

У parseFloat() нет поддержки radix.

Проверять NaN через ===

const value = parseFloat("hello");

console.log(value === NaN); // false

Для проверки нужен Number.isNaN().

Быстрая памятка

parseFloat() читает дробное число из начала строки
если чтение не удалось, результатом будет NaN
функция сохраняет дробную часть
parseFloat() не имеет аргумента radix
в отличие от Number(), она не требует, чтобы вся строка была числом

Коротко

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