Number.toFixed() в JavaScript — число з заданою кількістю знаків

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

Number.prototype.toFixed() є методом прототипу числа, який конвертує число в рядок, округлюючи його до фіксованої кількості знаків після коми. Основна корисність цього методу полягає у тому, що він дозволяє визначити точну кількість десяткових знаків у виведеному рядку, що є корисним, наприклад, при форматуванні грошових сум або інших числових значень, де важлива точність.

Для використання Number.prototype.toFixed() необхідно викликати цей метод з числового об'єкта, передаючи як аргумент кількість десяткових знаків після коми. Наприклад:

let num = 5.56789;
let result = num.toFixed(2);
console.log(result); // "5.57"

В усіх сучасних браузерах діапазон допустимих значень для аргументу лежить від 0 до 20. Якщо не вказати аргумент, за замовчуванням буде використано 0, тобто число округлиться до найближчого цілого:

let num = 5.56789;
let result = num.toFixed();
console.log(result); // "6"

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

правити

Порада

У деяких випадках, особливо при великих числах, результат toFixed() може бути некоректний через обмеження точності чисел з рухомою комою. Для великих розрахунків рекомендується використовувати спеціалізовані бібліотеки, такі як BigNumber.js.

автор: Bond правити

Порада

Пам'ятайте, що результат методу toFixed() - це рядок, а не число. Це може стати пасткою для початківців, які очікують отримати число. Якщо вам потрібно знову перетворити результат на число, використовуйте parseFloat():

let strPrice = price.toFixed(2);
let numPrice = parseFloat(strPrice);

автор: Bond правити

Нотатка

Будьте обережні з великими значеннями для аргумента цього методу. Якщо передати значення більше 100, виникне помилка RangeError. Якщо вам потрібна велика кількість знаків після коми, розгляньте використання інших методів або бібліотек.

автор: Bond правити

Нотатка

Метод Number.prototype.toFixed() дуже корисний, коли вам потрібно відобразити число з конкретною кількістю знаків після десяткової коми. Це особливо актуально при роботі з фінансовими даними, де точність важлива. Наприклад:

let price = 2.45678;
console.log(price.toFixed(2)); // "2.46"

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

toFixed()
toFixed(digits)

Параметри

digits

Кількість знаків, які мають з'явитися після десяткової коми; має бути значенням від 0 до 100 включно. Якщо цей аргумент не вказано, його вважається 0.

автор: Bond

правити

Повернення

string

Повертає рядок, який представляє задане число в нотації з фіксованою крапкою.

автор: Bond

правити

Винятки

RangeError: якщо значення digits не лежить в діапазоні від 0 до 100 (включно).

TypeError: якщо цей метод викликається на об'єкті, який не є числом (Number).

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	2	7	12	5.5

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Підтримка: серверні переглядачі

Переглядач
	0.10.0	1.0

Приклади

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

const price = 45.6789;

// Заокруглення до двох знаків після коми
const formattedPrice = price.toFixed(2);

console.log(formattedPrice); // Виведе "45.68"

// Функція для розрахунку відсотка від загальної суми
function calculatePercentage(part, total) {
  return (part / total) * 100;
}

const studentsPassed = 23;
const totalStudents = 30;

// Розрахунок відсотка студентів, які склали екзамен
const passRate = calculatePercentage(studentsPassed, totalStudents);

// Форматування відсоткової ставки до двох знаків після коми
const formattedPassRate = passRate.toFixed(2);

console.log(`Студенти, які склали екзамен: ${formattedPassRate}%`); // Виведе "Студенти, які склали екзамен: 76.67%"

<header>
  <h2 class="title">Number.prototype.toFixed()</h2>
  <p class="description">Форматує число, заокруглюючи його до заданої кількості десяткових знаків.</p>
</header>
<main>
  <div class="result">
    <label for="number">Введіть число: </label>
    <input type="number" id="number" step="0.001" value="123.4567">
    <br><br>
    <label for="decimals">Кількість знаків після коми: </label>
    <input type="number" id="decimals" min="0" max="20" value="2">
    <br><br>
    <button onclick="formatNumber()">Форматувати</button>
    <p>Результат: <span id="resultDisplay">123.46</span></p>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

function formatNumber() {
  const number = parseFloat(document.getElementById('number').value);
  const decimals = parseInt(document.getElementById('decimals').value);

  // Використовуємо toFixed() для форматування числа
  const formattedNumber = number.toFixed(decimals);

  document.getElementById('resultDisplay').innerText = formattedNumber;
}
//# sourceURL=pen.js