JS метод Global.parseFloat()


Загальний опис

parseFloat() – це вбудований метод у JavaScript, що дозволяє конвертувати рядкове значення в число з плаваючою комою. Іноді, коли ми працюємо з даними, отриманими з зовнішніх джерел, числа можуть бути представлені у вигляді рядків. У таких випадках parseFloat() стає незамінним інструментом для правильної обробки цих даних.

Необхідність цього методу полягає в тому, щоб визначити числові значення в рядках. Наприклад, ви отримали дані з API, де ціни товарів представлені як рядки, і вам потрібно порівняти ціни або обчислити загальну вартість замовлення. Якщо спробувати виконати арифметичні операції з рядками, результат буде неправильний. Тут на допомогу приходить parseFloat().

Основне застосування parseFloat() – це конвертація рядків у числа. Але важливо розуміти, що він спробує конвертувати рядок тільки до того моменту, поки він зустрічає символ, який не є частиною числа. Наприклад:

let value = "123.45px";
let number = parseFloat(value); // 123.45

У вищезазначеному прикладі ми бачимо, що parseFloat() успішно конвертував рядок до числа, але проігнорував "px" в кінці рядка.

Однак, якщо рядок починається з нечислового символу, метод поверне NaN:

let value = "px123.45";
let number = parseFloat(value); // NaN

Метод parseFloat() може розпізнавати лише десяткову точку (не кому). Тому, якщо ви використовуєте інші символи для розділення, наприклад кому, то результат буде ігнорувати все, що йде після коми.

Також цікавою особливістю є те, що parseFloat() завжди конвертує значення у 64-бітне число з плаваючою комою, незалежно від того, чи має воно дробову частину.

parseFloat() має декілька важливих відмінностей від інших методів конвертації, таких як Number(). Наприклад, він не розпізнає числові літерали у шістнадцятковій системі обчислення.

автор: Bond

Порада

Переконайтеся, що рядок, який ви передаєте на вхід в parseFloat(), дійсно представляє число. Якщо рядок починається з тексту, метод поверне NaN. Для новачків важливо перевіряти рядок перед тим, як використовувати цей метод, щоб уникнути непередбачуваних результатів. Наприклад, перед викликом parseFloat() можна використовувати регулярний вираз для перевірки правильності формату рядка.

автор: Bond
Порада

Якщо вам потрібна більша гнучкість при розборі чисел з рядків, розгляньте можливість використання бібліотек типу BigNumber. parseFloat() може не завжди відповідати вашим потребам, особливо при роботі з дуже великими або дуже малими числами.

автор: Bond
Порада

Важливо зауважити, що JavaScript не розрізняє числа з плаваючою комою та цілі числа на рівні мови, тому parseInt() та parseFloat() можуть повертати однакові значення для однакових рядків.

автор: Bond
Нотатка

Пам'ятайте, що parseFloat() завжди аналізує рядок зліва направо. Тому якщо рядок починається з числа, але після нього йде текст, метод поверне число до першого нечислового символу. Наприклад, parseFloat("123.45abc") поверне 123.45.

автор: Bond
Нотатка

Для тих, хто працює з локалізованими числами: будьте уважні, що parseFloat() вважає крапку (.) десятковим роздільником. В інших культурах десятковий роздільник може бути комою (,), тому перед використанням parseFloat() може знадобитися заміна коми на крапку.

автор: Bond

Синтаксис

parseFloat(string)

Параметри

string

Значення, яке потрібно розібрати, приводиться до рядкового типу. Початкові пробільні символи в цьому аргументі ігноруються.

автор: Bond

Повернення

float

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

автор: Bond

Переглядачі

Підтримка: стаціонарні переглядачі
Переглядач Google Chrome Mozilla Firefox Apple Safari Opera Microsoft EDGE Microsoft Internet Explorer
1 1 1 3 12 3
Підтримка: мобільні переглядачі
Переглядач Mobile Google Android Mobile Google Chrome Mobile Mozilla Firefox Mobile Apple Safari
4.4 18 4 1
Підтримка: серверні переглядачі
Переглядач Node.js Deno
0.10.0 1.0

Приклади

+ запропонувати свій приклад у пісочниці

У цьому прикладі ми створили просту форму для введення рядкового значення. Після того, як користувач вводить рядкове значення і натискає на кнопку "Конвертувати", JavaScript-функція convertToFloat() викликається, щоб конвертувати введений рядок у число з плаваючою комою за допомогою parseFloat(). Результат потім відображається у вказаному місці на сторінці.

автор: Bond

Цей приклад демонструє, як можна використовувати parseFloat() для вилучення числового значення з рядка, що містить і число, і текст. У нашому випадку ми маємо рядок price, який представляє ціну товару з символами валюти "грн". Функція extractAmount() вилучає числове значення, використовуючи parseFloat(), і повертає його.

// Функція, яка приймає рядок з числом та валютою, та повертає лише число
function extractAmount(valueStr) {
  return parseFloat(valueStr); // використання parseFloat() для отримання числового значення з рядка
}

var price = "120.50грн";
console.log(extractAmount(price)); // Виводимо 120.50
автор: Bond

Цей приклад демонструє, як можна адаптувати parseFloat() для роботи з числами, які використовують кому в якості десяткового роздільника (наприклад, у європейських стандартах). Ми використовуємо метод рядка replace() для заміни коми на крапку, після чого використовуємо parseFloat() для перетворення рядка на число. Таким чином, рядок europeanNumber "45,67" стає числом 45.67.

// Функція, яка перетворює кому на крапку та повертає числове значення
function convertToNumber(euroValue) {
  // Замінюємо кому на крапку перед parseFloat()
  return parseFloat(euroValue.replace(',', '.'));
}

var europeanNumber = "45,67";
console.log(convertToNumber(europeanNumber)); // Виводимо 45.67
автор: Bond

Коментарі

Коментарів ще немає — будьте першим!

Відповідь для

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~
Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень
Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле саме підкаже шляхи, а хибний підкреслить хвилею.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```
Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження
Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox
Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає
Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.
Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||
Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Увійдіть — коментар з'явиться одразу, без капчі й очікування перевірки.

Пропозиція правки

Ваша версія — : після перевірки замінить чинну. Нова порада чи нотатка — з'явиться на сторінці після перевірки.

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~
Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень
Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле саме підкаже шляхи, а хибний підкреслить хвилею.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```
Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження
Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox
Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає
Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.
Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||
Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Ваша версія секції «»: після перевірки замінить чинну.

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~
Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень
Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле саме підкаже шляхи, а хибний підкреслить хвилею.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```
Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження
Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox
Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає
Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.
Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||
Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Ваша версія опису «»: після перевірки замінить чинну.

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~
Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень
Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле саме підкаже шляхи, а хибний підкреслить хвилею.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```
Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження
Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox
Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає
Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.
Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||
Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Зворотний зв'язок
Вхід