Round Numbers in TypeScript

In this tutorial, we will learn to round numbers in TypeScript. In TypeScript, the number data types can contain number values with decimal parts, and sometimes, we require to remove decimal part by rounding the number value.

For example, if you want to show the progress of something in the application, and you are getting the decimal value of the progress, but you want to show the integer values only, then it is required to round the numbers.

Here, we will learn 3 to 4 different methods to round the numbers.

Using The Math.round() Method to Round a Number

In TypeScript, the Math.round() method is used to round the number to the nearest decimal point. It returns the integer value after rounding the number.

Syntax

let number1: number = 322.3232;
Math.round(number)

In the above syntax, we created the number variable and use the math.round() method to round the number.

Parameters

The Math.round() method takes a single parameter explained below.

• number ? It is a number value that needs to be rounded to the nearest integer.

Example

In the example below, we have created the four number variables containing the different values. After that, we used the Math.round() method to round every number value.

In the output, users can observe that as the decimal part of the number1 is near 322 than 323, it's rounded down to 322. Same as the number1, number2 is nearest to 323, so it's rounded up to 323. Also, number4 variable is rounded to infinity as its value is infinity.

let number1: number = 322.3232; // number with decimal part near to zero
let number2: number = 0.0300012; // number between 0 and 1
let number3: number = 322.98878; // number with decimal part near to one
let number4: number = Infinity; // infinity value
// Using the Math.round() method for the different number values
console.log(
   "After rounding the " + number1 + " it's value is " + Math.round(number1)
);
console.log(
   "After rounding the " + number2 + " it's value is " + Math.round(number2)
);
console.log(
   "After rounding the " + number3 + " it's value is " + Math.round(number3)
);
console.log(
   "After rounding the " + number4 + " it's value is " + Math.round(number4)
);

On compiling, it will generate the following JavaScript code ?

var number1 = 322.3232; // number with decimal part near to zero
var number2 = 0.0300012; // number between 0 and 1
var number3 = 322.98878; // number with decimal part near to one
var number4 = Infinity; // infinity value
// Using the Math.round() method for the different number values
console.log("After rounding the " + number1 + " it's value is " + Math.round(number1));
console.log("After rounding the " + number2 + " it's value is " + Math.round(number2));
console.log("After rounding the " + number3 + " it's value is " + Math.round(number3));
console.log("After rounding the " + number4 + " it's value is " + Math.round(number4));

Output

The above code will produce the following output ?

After rounding the 322.3232 it's value is 322
After rounding the 0.0300012 it's value is 0
After rounding the 322.98878 it's value is 323
After rounding the Infinity it's value is Infinity

Using the Math.trunc() Method to Round Down a Number

The Math.trunc() method always round downs the number value passed as a parameter. We can also use the Math.truc() method to remove the decimal part of the number in TypeScript.

Syntax

Users can follow the syntax below to learn to use the Math.trunc() method to round down the number.

let var1: number = 100;
Math.trunc(var1)

Here var1 is a value that needs to be rounded down.

Example

In the example below, we have defined four numbers and initialized them with various values. We used the Math.trunc() method to round down or remove the decimal part from the number.

In the output, users can see that var1, var2, and var3 are all variables rounded to 100 as the method removes the decimal part.

// number variables with the different values
let var1: number = 100;
let var2: number = 100.9999;
let var3: number = 100.0001;
let var4: number = 0.0001;

// using the Math.truc() method to round down the numbers
console.log("After rounding down the " + var1 + " is " + Math.trunc(var1));
console.log("After rounding down the " + var2 + " is " + Math.trunc(var2));
console.log("After rounding down the " + var3 + " is " + Math.trunc(var3));
console.log("After rounding down the " + var4 + " is " + Math.trunc(var4));

On compiling, it will generate the following JavaScript code ?

// number variables with the different values
var var1 = 100;
var var2 = 100.9999;
var var3 = 100.0001;
var var4 = 0.0001;

// using the Math.truc() method to round down the numbers
console.log("After rounding down the " + var1 + " is " + Math.trunc(var1));
console.log("After rounding down the " + var2 + " is " + Math.trunc(var2));
console.log("After rounding down the " + var3 + " is " + Math.trunc(var3));
console.log("After rounding down the " + var4 + " is " + Math.trunc(var4));

Output

The above code will produce the following output ?

After rounding down the 100 is 100
After rounding down the 100.9999 is 100
After rounding down the 100.0001 is 100
After rounding down the 0.0001 is 0

Using the Math.ceil() Method to Round Up a Number

Users can follow the syntax below to round up numbers using the Math.ceil() method.

Syntax

let num1: number = 99.99;
Math.ceil(num1)

Here num1is a number value we want to round up using the Math.ceil() method.

Example

Users can see that we used the Math.ceil() method to round up the numbers. In the output, we can observe that the num1 and num2 variables are rounded up to 100 even though num2 is very close to 99. As num3 is already an integer, it remains the same.

// Defining the various numbers
let num1: number = 99.99; // number near to 100
let num2: number = 99.000001; // number near to 99
let num3: number = 99; // integer value
let num4: number = -Infinity; // infinity value

// Using the Math.ceil() method to round up the numbers
console.log("After rounding up the " + num1 + " is " + Math.ceil(num1));
console.log("After rounding up the " + num2 + " is " + Math.ceil(num2));
console.log("After rounding up the " + num3 + " is " + Math.ceil(num3));
console.log("After rounding up the " + num4 + " is " + Math.ceil(num4));

On compiling, it will generate the following JavaScript code ?

// Defining the various numbers
var num1 = 99.99; // number near to 100
var num2 = 99.000001; // number near to 99
var num3 = 99; // integer value
var num4 = -Infinity; // infinity value

// Using the Math.ceil() method to round up the numbers
console.log("After rounding up the " + num1 + " is " + Math.ceil(num1));
console.log("After rounding up the " + num2 + " is " + Math.ceil(num2));
console.log("After rounding up the " + num3 + " is " + Math.ceil(num3));
console.log("After rounding up the " + num4 + " is " + Math.ceil(num4));

Output

The above code will produce the following output ?

After rounding up the 99.99 is 100
After rounding up the 99.000001 is 100
After rounding up the 99 is 99
After rounding up the -Infinity is -Infinity

Using the toFixed() Method to Round a Number to Particular Decimal Point

In TypeScript, we can use the toFixed() method to round the numbers to a particular decimal point. For example, if we want to round numbers to till five decimal points, the toFixed() method keeps exactly five integers after the decimal point. If the number doesn't have five or more than five integers after the decimal point, it appends 0, but it returns the number with exact 5 decimal values.

Syntax

let variableA: number = 765.656566565565;
variableA.toFixed(decimal_place)

The above syntax shows us to use of the toFixed() method with decimal numbers to round them.

Parameters

• decimal_place ? It is the total number of decimal places till you want to round referenced number.

Example

In the example below, we used the different numeric values with the toFixed() method to round to a particular decimal place. In the output, we can see how variableB is rounded to 5 decimal places by adding the zeros.

// Different variables with different number of decimal place values
let variableA: number = 765.656566565565;
let variableB: number = 765.2;
let variableC: number = 765;

// Using the toFixed() method to round number to particular decimal place
console.log(
   "After rounding the " +
   variableA +
   " to 3 decimal place is " +
   variableA.toFixed(3)
);
console.log(
   "After rounding the " +
   variableB +
   " to 3 decimal place is " +
   variableB.toFixed(5)
);
console.log(
   "After rounding the " +
   variableC +
   " to 3 decimal place is " +
   variableC.toFixed(0)
);

On compiling, it will generate the following JavaScript code ?

// Different variables with different number of decimal place values
var variableA = 765.656566565565;
var variableB = 765.2;
var variableC = 765;

// Using the toFixed() method to round number to particular decimal place
console.log("After rounding the " +
variableA +
" to 3 decimal place is " +
variableA.toFixed(3));
console.log("After rounding the " +
variableB +
" to 3 decimal place is " +
variableB.toFixed(5));
console.log("After rounding the " +
variableC +
" to 3 decimal place is " +
variableC.toFixed(0));

Output

The above code will produce the following output ?

After rounding the 765.656566565565 to 3 decimal place is 765.657
After rounding the 765.2 to 3 decimal place is 765.20000
After rounding the 765 to 3 decimal place is 765

In this tutorial, we have discussed different methods to round a number in TypeScript.