Rounding number to at least 2 decimal places in JavaScript or TypeScript

If you need to round a decimal number, then this tutorial will help you. That may look like a simple task. However, there may be some caveats that you have to know about.

JavaScript language provides various methods that can be used to truncate a number. Each solution is unique and can be used only in a specific situation.

As a result, we recommend you to review the following section to see how exactly you can round a number.

Using the toFixed() method

The Number class has the toFixed() method. It allows you to format the given floating point value. There is only a single parameter to that method. It specifies how many numbers should be kept after the decimal point.

Now, let's see how it works. Our code sample is given below. The number "345.6789357" is assigned to the variable "value". Then, the toFixed() method is called with the value of 2.

const value = 345.6789357;

const shortValue = value.toFixed(2);

console.log(shortValue);

The console output is provided below. If you run the given code, you should see the number "345.68" in your terminal.

developer@developer-pc:~/samples/javascript$ node index.js
345.68

We can also try to pass the value of 1 into the toFixed() method. This will give us a formatted number that contains only a single number after a decimal point. The source code is given below.

const value = 345.6789357;

const shortValue = value.toFixed(1);

console.log(shortValue);

Please try to run the above sample. It should produce output like it is shown below.

developer@developer-pc:~/samples/javascript$ node index.js
345.7

The interesting thing is that you may call the toFixed() method without passing any value into it. In that case, you will get a number that has no decimal part. Our code sample is shown below.

const value = 345.6789357;

const shortValue = value.toFixed();

console.log(shortValue);

Let's see how it works. If you run the given script, you should see the number 346 in the console.

developer@developer-pc:~/samples/javascript$ node index.js
346

Type of the returned value

It is worth mentioning that the toFixed() method returns a string value. It's clearly visible in the following code sample. There, we use the typeof operator to get the type of the returned value. Then, we print it to the console.

const value = 345.6789357;

const shortValue = value.toFixed(2);

console.log(typeof shortValue);

If you run the given code sample, you should see the word "string" in the terminal.

developer@developer-pc:~/samples/javascript$ node index.js
string

However, if you'd like to use the formatted value in mathematical calculations again, you have to convert it back to the number. There is already an article on our site that explains how it can be done: How to convert string to a number in JavaScript or TypeScript.

How to round the value that is given in a string format?

In previous sections of this tutorial, we've shown how to round a number. However, you may have a floating point value that is stored as a string. If you'd like to use the toFixed() method, then you need to convert the given value into a number. To do that, you may use the parseFloat() method. See how it can be done in the following code sample.

const value = "345.6789357";

const shortValue = parseFloat(value).toFixed(2);

console.log(shortValue);

Then console output is shown below. If you run our code, you should see a number that contains only two numbers after the decimal point.

developer@developer-pc:~/samples/javascript$ node index.js
345.68

Using the Math.round() method

The Math class provides the round() method. It should be used to round a number to the nearest integer. That's not what we want, since we'd like to keep two numbers after the decimal point.

There is a trick that can help us. You may multiply the given value by 100. Then round it and divide again by 100. The final value should be a number that contains decimal numbers after the decimal point. Please see the following source code. It shows how exactly it should be done.

const value = 345.6789357;

const shortValue = Math.round(value * 100) / 100;

console.log(shortValue);

Now, let's see the console output. Our script prints the value 345.68, which means that the Math.round() method works and we have a rounded value.

developer@developer-pc:~/samples/javascript$ node index.js
345.68

However, there may be a situation when you need to round a number to any precision. In that case, you may create a code that uses the Math.pow() method to create a multiplication factor. If we need to round the input value to 2 numbers, then we'll have a factor of 100. But if we want to round the number to 3 numbers after the decimal point, then the code will produce the factor of 1000. See the following code sample, it shows how exactly it should be done.

function roundNumber(value, decimalPlaces = 0) {
    var multiplicationFactor = Math.pow(10, decimalPlaces);

    return Math.round(value * multiplicationFactor) / multiplicationFactor;
}

const value = 345.6789357;

const shortValue = roundNumber(value, 2);

console.log(shortValue)

As you can see below, the console output contains the number 345.68, which is rounded to two decimal points.

developer@developer-pc:~/samples/javascript$ node index.js
345.68

But, there can be a situation when the Math.round() method generates unexpected results. In some edge cases, the number may be rounded a little differently as you may expect it to work. To solve such an issue, you can add a special "Epsilon" value to the given number. The following code shows how it has to be done.

const value = 1.005;

const shortValue = Math.round((value + Number.EPSILON) * 100) / 100

console.log(shortValue);

Please run the given code. You should see the value 1.01 in your terminal.

developer@developer-pc:~/samples/javascript$ node index.js
1.01

You may also add the "Epsilon" value to the roundNumber() method. This gives you more flexibility. The function can produce a more precise value and have a custom multiplication factor. The source code is given below.

function roundNumber(value, decimalPlaces = 0) {
    var multiplicationFactor = Math.pow(10, decimalPlaces);

    return Math.round((value + Number.EPSILON) * multiplicationFactor) / multiplicationFactor;
}

const value = 1.005;

const shortValue = roundNumber(value, 2);

console.log(shortValue)

The console output is shown below. We still have the same number there, which is 1.01.

developer@developer-pc:~/samples/javascript$ node index.js
1.01

Using the Math.trunc() method

The Math.trunc() method may also help you to make a number that contains only 2 decimal numbers. However, it works a little differently than the Math.round() method. The decimal part of a number is simply removed. It means that there is no rounding. Please see the following code sample, it shows how to use this method.

const value = 345.6789357;

const shortValue = Math.trunc(value * 100) / 100;

console.log(shortValue);

The console output is given below. There is a number 345.67. And as you may see, it ends with the number 7, not 8. That's because we use the Math.trunc() method in our code.

developer@developer-pc:~/samples/javascript$ node index.js
345.67

Using the exponent

There is an alternative method that allows you to round a number to two decimal places. The idea is that you use the exponent notation in the code. The "e+2" string is appended to the input value. Then, the result of that operation is passed into the Math.round() method.

After that, we have to use the "e-2" string to convert the value back. The final value is converted to a number with the help of the "+" sign.

Please see below how this method is implemented.

function roundByExponentToTwo(value) {
    return +(Math.round(value + "e+2")  + "e-2");
}

const value = 345.6789357;

const shortValue = roundByExponentToTwo(value);

console.log(shortValue);

The console output of the given code is shown below.

developer@developer-pc:~/samples/javascript$ node index.js
345.68

However, you may want to round a given value to any precision. In that case, you should dynamically generate the pattern that is used in conversion. Please review the following example, it shows how it can be done.

function roundByExponent(value, decimalPlaces) {
    return  +(Math.round(value + "e+" + decimalPlaces)  + "e-" + decimalPlaces);
}

const value = 345.6789357;

const shortValue = roundByExponent(value, 2);

console.log(shortValue);

If you run the given script, you should see the same number, which is 345.68.

developer@developer-pc:~/samples/javascript$ node index.js
345.68

Rounding a negative number

We may also use the same code to round a negative number. The given script will work, however, the results may be a little different as you may expect. Please review the following sample.

function roundByExponent(value, decimalPlaces) {
    return  +(Math.round(value + "e+" + decimalPlaces)  + "e-" + decimalPlaces);
}

const value = -345.675;

const shortValue = roundByExponent(value, 2);

console.log(shortValue);

If we try to round the value -345.675, then the generated number will be -345.67. As you may notice, the final value ends with the number 7.

Console output of the given code is shown below.

developer@developer-pc:~/samples/javascript$ node index.js
-345.67

If you'd like that the given number ends with the number 8, then we need to change the algorithm. Our function should check if the input number is negative. In that case, we must invert our number twice, before and after the rounding. In other words, the code will round a positive number, but the "-" sign is temporarily taken out during conversion. The following code shows how it should be done.

function roundByExponentNegative(value, decimalPlaces) {
    if (value < 0) {
        value = -Math.round(-value + "e" + decimalPlaces);
    } else {
        value = Math.round(value + "e" + decimalPlaces);
    }

    return +(value + "e" + -decimalPlaces);
}

const value = -345.675;

const shortValue = roundByExponentNegative(value, 2);

console.log(shortValue);

Now, let's see how the given code works. The console output should contain the number -345.68.

developer@developer-pc:~/samples/javascript$ node index.js
-345.68

Using the Number.toLocaleString() method

You may also use the Number.toLocaleString() method to round a number to the desired precision. However, this method is not standard. It should be used mostly for formatting a number according to locale settings for a specific language. However, just in case you ever want to use this method, please see below how it can be implemented in the JavaScript code.

const value = 345.6789357;

const shortValue = value.toLocaleString('en', {
    useGrouping: false,
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
})

console.log(shortValue);

If you run the given code, the console output may be like it's shown below.

developer@developer-pc:~/samples/javascript$ node index.js
345.68

Let's also try to change the minimumFractionDigits option to the value 1. This should produce a number that has only a single number after the decimal point. See the source code below.

const value = 345.600000;

const shortValue = value.toLocaleString('en', {
    useGrouping: false,
    minimumFractionDigits: 1,
    maximumFractionDigits: 2
})

console.log(shortValue);

Please run the given code. You should see a value of 345.6 in the terminal.

developer@developer-pc:~/samples/javascript$ node index.js
345.6

Using the Intl.NumberFormat() object

That's also a non-standard method of rounding a number. It may not be suitable in all cases. But we are showing it here just in case you want to know all the possible methods of formatting a number.

If you use the Intl.NumberFormat() object, then you have to provide the relevant locale string. Also, you need to pass an additional object that specifies how exactly the number must be converted.

The maximumFractionDigits option is set to 2, which means that we allow only two numbers after a decimal point. See how it should be done below.

const value = 345.6789357;

const shortValue = new Intl.NumberFormat('en-US', {
    maximumFractionDigits: 2
}).format(value);

console.log(shortValue);

Now, you may try to run our code. The console output is shown below.

developer@developer-pc:~/samples/javascript$ node index.js
345.68

You may also use the Intl.NumberFormat() object without specifying additional options. That also may work, however, the default configuration will be used in that case. See below how it has to be done.

const value = 345.6789357;

const shortValue = new Intl.NumberFormat().format(value);

console.log(shortValue);

Also, following is the console output of the given code.

developer@developer-pc:~/samples/javascript$ node index.js
345.679

Using the lodash library

As you know, the lodash library is very popular. It's used in many web applications. And it also has several methods that allow you to round a specific number.

First of all, you have to load the lodash module. We use the CommonJS module system in our code samples. That means that we have to use the require() method to import the library into our project.

After that, we can use the round() method to generate a value that has a specific amount of numbers after a decimal point. The first parameter is the value that we want to round. The second parameter is precision.

Please review the following code sample. It shows how this method should be used.

const _ = require('lodash');

const value = 345.6789357;

const shortValue = _.round(value, 2);

console.log(shortValue);

If we run the given code, we should see the value 345.68 in the console, as it's shown below.

developer@developer-pc:~/samples/javascript$ node index.js
345.68

The ceil() method may also be used to round a value to a specific precision. The parameters are the same, you have to provide a value and a precision. Code sample is given below.

const _ = require('lodash');

const value = 345.6789357;

const shortValue = _.ceil(value, 2);

console.log(shortValue);

The console output is shown below. As you see, we still have the number 345.68 there. That's because the ceil() method rounds the value up to the specified precision.

developer@developer-pc:~/samples/javascript$ node index.js
345.68

Let's also see how the floor() method works. It also can be used to round a value. See our code sample below.

const _ = require('lodash');

const value = 345.6789357;

const shortValue = _.floor(value, 2);

console.log(shortValue);

If you run the given code, you should see the value 345.67 in your terminal. As you see, the last number is different. That's because the floor() method rounds the value down to the given precision.

developer@developer-pc:~/samples/javascript$ node index.js
345.67

Conclusion

It's very easy to round a specific number in the JavaScript programming language. There are many interesting methods that you can use in your code. You may try each solution and see which method generates the suitable numbers. You should use the API that rounds a number to a precision that is acceptable by you.

However, this tutorial describes the most popular methods only. There may be many other frameworks that can round a number. You can try to find additional libraries on the GitHub platform or in the official NPM registry.