This tutorial explains in detail how to format numbers into strings with fixed two decimals in JavaScript, even integers can be displayed in the form of "#.00". We will focus on the use of the Number.prototype.toFixed() method, including its syntax, functionality, sample code, and key points to be noted, such as its return type always being a string.

In front-end development, we often need to format numbers to ensure they are rendered in a unified and readable way on the user interface. A common requirement is to format numbers (whether integers or decimals) into fixed decimal places, such as currency amounts usually require two decimal places to be displayed. Number types in JavaScript do not contain format information by themselves, so when we need to control the display format of numbers, we need to convert them to strings and apply specific formatting rules.

Use the toFixed() method for digital formatting

JavaScript provides a built-in method Number.prototype.toFixed(), which is specifically used to convert numbers into strings and retain a specified number of decimal places.

Method Overview

The toFixed() method receives a parameter that specifies the number of digits to be retained after the decimal point. It rounds the number to the specified decimal places and returns a string representing the number.

grammar:

 numObj.toFixed(digits)

• numObj: Required. The digital object to format.
• digits: Optional. Specify how many digits should be after the decimal point. The value must be between 0 and 20 (including 0 and 20). If omitted, the default is 0.

Sample code

The following example demonstrates how to format different types of numbers into strings of two decimal places using toFixed(2):

 let num1 = 18; // integer let num2 = 18.1; // one decimal let num3 = 18.11; // two decimal let num4 = 18.115; // three decimal, rounded let num5 = 18.0; // explicit decimal console.log(num1.toFixed(2)); // Output: "18.00"
console.log(num2.toFixed(2)); // Output: "18.10"
console.log(num3.toFixed(2)); // Output: "18.11"
console.log(num4.toFixed(2)); // Output: "18.12" (rounded)
console.log(num5.toFixed(2)); // Output: "18.00"

As can be seen from the above example, toFixed(2) can:

• Add .00 for integers.
• Add a 0 for a number with only one decimal.
• Keep the number with two decimal places unchanged.
• Round up numbers with more than two decimal places.

Things to note

There are several key points that need special attention when using the toFixed() method:

1. The return type is a string : the return value of the toFixed() method is always a string. This means that if you need to math the formatted value, you may need to convert it back to a numeric type first (for example using parseFloat() or Number()), but this is usually not the main requirement for displaying formatted scenarios.

    let formattedNum = (18).toFixed(2); // formattedNum is "18.00"
   console.log(typeof formattedNum); // Output: "string"
   // console.log(formattedNum 1); // The result is "18.001", because it is a string splicing

2. Rounding behavior : toFixed() will perform standard rounding. When the number to be discarded is 5, it rounds upwards.

    console.log((1.005).toFixed(2)); // Output: "1.01"
   console.log((1.004).toFixed(2)); // Output: "1.00"

3. Nonlocalization : the toFixed() method does not consider the user's locale. It always uses dots (.) as the decimal separator. If your application needs to support multiple languages ??and multiple regions, and needs to display different decimal separators or thousand separators according to the region, then Intl.NumberFormat is the more suitable choice.

    // For example, in some regions, the decimal separator is a comma // toFixed() will not handle this situation // const formatter = new Intl.NumberFormat('de-DE', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
   // console.log(formatter.format(12345.67)); // May output "12.345,67"

4. Parameter range : The digits parameter must be between 0 and 20. Exceeding this range will result in a RangeError.

Summarize

The Number.prototype.toFixed() method is a very practical tool in JavaScript for formatting numbers into strings with fixed decimal places, especially for scenarios where a unified display format is required, such as financial data or commodity prices. Understanding that its return type is a string and its rounding behavior is the key to correct use. For more complex localization needs, consider using the Intl.NumberFormat API.

The above is the detailed content of Number formatting in JavaScript: Use toFixed() method to retain fixed decimal places. For more information, please follow other related articles on the PHP Chinese website!