Tutorials Tonight
Follow Us

JavaScript Number Format


In this article, you will learn how to format numbers in JavaScript using some built-in and custom functions. We also work on precision and rounding of numbers.

In JavaScript, we do not have integer, float, or double data types for numbers like in Java, C, or C++.

Instead, JavaScript uses Number data type which is always double. the number data type is used to represent numeric values. It can be used to represent both integer and floating point numbers.

javascript number format

While programming we generally face situations like converting a long float value to a precision of 2 or 3.

And sometimes you have to convert a general big number into comma separated number like 1,000,000,000 or convert a number to some currency system.

These problems are shown in the above image and can be solved by formatting numbers.


JavaScript Number Format Decimal

JavaScript provides a built-in method Number.toFixed() to format a number to a specified number of decimal places.

The toFixed() method takes one argument which is the number of decimal places to be displayed which is optional and by default, it is 0.

Example

let num = 12.345678;

// default toFixed() method
console.log(num.toFixed()); // 12
// 2 decimal places
console.log(num.toFixed(2)); // 12.35
// 3 decimal places
console.log(num.toFixed(3)); // 12.346
// 6 decimal places
console.log(num.toFixed(4)); // 12.3457

You can also expand the number by giving a large number of decimal places.

Example

let num = 34.567;

console.log(num.toFixed(5)); // 34.56700
console.log(num.toFixed(10)); // 34.5670000000

JavaScript Number Format Comma

To format number with comma javascript provides a built-in method Number.toLocaleString(). It separates the number with a comma.

The toLocaleString() method takes one argument which is the locale to be used which is optional and by default it is en-US.

The locale can be any of the following:

The position of the comma can be changed by different locales like the US separates numbers with a comma at every 3 digits while India uses a comma at every 2 digits (the last 3 digits are not separated).

Example

let num = 73234525678;

// US system en-US
console.log(num.toLocaleString('en-US')); // 73,234,525,678
// India system hi-IN
console.log(num.toLocaleString('hi-IN')); // 73,23,45,25,678

Custom Function For Comma Separation

You can also create your own custom function that takes a number and returns a comma separated number.

Example

function separateComma(val) {
  // trim the number decimal point if it exists
  let num = val.toString().includes('.') ? val.toString().split('.')[0] : val.toString();
  let len = num.toString().length;
  let result = '';
  let count = 1;

  for (let i = len - 1; i >= 0; i--) {
    result = num.toString()[i] + result;
    if (count % 3 === 0 && count !== 0 && i !== 0) {
      result = ',' + result;
    }
    count++;
  }

  // return the number with decimal point if it exists
  return val.toString().includes('.') ? (result + '.' + val.toString().split('.')[1]) : result;
}

let num1 = 12345678;
console.log(separateComma(num1));

// decimal number
let num2 = 72364769.2343;
console.log(separateComma(num2));

The same function can be created using the regular expression and replace method.

Example

function commaSeparateNumber(val) {

  // trim the number decimal point if it exists
  let num = val.toString().includes('.') ? val.toString().split('.')[0] : val.toString();

  while (/(\d+)(\d{3})/.test(num.toString())) {
    // insert comma to 4th last position to the match number
    num = num.toString().replace(/(\d+)(\d{3})/, '$1' + ',' + '$2');
  }

  // return the number with decimal point if it exists
  return val.toString().includes('.') ? (num + '.' + val.toString().split('.')[1]) : num;
}
// decimal number
let num1 = 77799;
console.log(commaSeparateNumber(num1));

// decimal number
let num2 = 72364769.1234;
console.log(commaSeparateNumber(num2));

JavaScript Number Format Currency

JavaScript has a built-in number format method for currency, it is Intl.NumberFormat().

It is part of the Intl (international) object and it takes two arguments, the first is the locale and the second is the currency code like USD, INR, EUR, etc.

Example

const number = 76346.45;

// United state $
console.log(new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(number));
// Indian rupee ₹
console.log(new Intl.NumberFormat('hi-IN', { style: 'currency', currency: 'INR' }).format(number));

Conclusion

JavaScript numbers can be formatted in different ways like comma, currency, etc. You can use the toFixed() method to format the number with decimal points, toLocaleString() method to format the number with comma and Intl.NumberFormat() method to format the number with currency.

You can also create your own custom function to format the number. This article covers all types of number conversion.