JavaScript Explained: A Complete Guide to Rounding, Truncating, and Ceiling Decimal Numbers with Specified Digits

This time, we will explain in detail how to use JavaScript to round, truncate, and ceil decimal numbers with a specified number of digits.
This technique is extremely useful in web development and data processing. In particular, it can be applied in scenarios where accuracy is required, such as finance or scientific calculations. Let’s first look at how to use the basic functions.

Number Processing with JavaScript Math Functions

In JavaScript, you can perform various mathematical calculations using the Math object. Here, we focus on handling decimals in particular: for rounding we use Math.round(), for truncation we use Math.floor(), and for ceiling we use Math.ceil().

1. Rounding – Math.round()
   The Math.round() function rounds to the nearest integer. For example, Math.round(1.5) rounds to 2, and Math.round(1.4) rounds to 1.
2. Truncation – Math.floor()
   The Math.floor() function truncates to the largest integer less than or equal to the given number. For example, Math.floor(1.9) truncates to 1.
3. Ceiling – Math.ceil()
   The Math.ceil() function rounds up to the smallest integer greater than or equal to the given number. For example, Math.ceil(1.1) rounds up to 2.

How to Process Decimals with Specified Digits

To round, truncate, or ceil decimals to a specific number of digits, you can modify the above functions slightly. Let’s define the following functions to see how to process numbers at any digit position.

// Rounding
function sisyagonyu(value, digits) {
    const factor = Math.pow(10, digits);
    return Math.round(value * factor) / factor;
}

// Truncation
function kirisute(value, digits) {
    const factor = Math.pow(10, digits);
    return Math.floor(value * factor) / factor;
}

// Ceiling
function kiriage(value, digits) {
    const factor = Math.pow(10, digits);
    return Math.ceil(value * factor) / factor;
}

Implementation Example and Demo Page

By actually using these functions, you can gain a more concrete understanding. For example, the following demo shows how to process the number 19.87654321 to two decimal places using each method. The results are displayed neatly with HTML and CSS, while JavaScript performs the actual calculations.

CSS Code

Here is the CSS code for the output elements (div) where the results of rounding, truncation, and ceiling are displayed.

<style>
body {
  font-size: 14px;
  text-align: center;
  line-height: 2em;
}
h1{
  text-align: center;
  font-size: 18px;
  line-height: 1.6em;
  padding: 15px 0 40px 0;
}
div{
  font-size: 20px;
  font-weight: bold;
  padding: 5px 0;
}
</style>

HTML Code

The results of rounding, truncation, and ceiling of the number “19.87654321” to two decimal places are output to the elements class=”sisyagonyu2″, class=”kirisute2″, and class=”kiriage2″.

  <h1>Displaying Rounding, Truncation, and Ceiling of Decimals with Specified Digits in JavaScript</h1>

<div class="sisyagonyu1">
19.87654321
</div>
↓ Rounding to 2 decimal places
<div class="sisyagonyu2"></div>

<br><br>

<div class="kirisute1">
19.87654321
</div>
↓ Truncation to 2 decimal places
<div class="kirisute2"></div>

<br><br>

<div class="kiriage1">
19.87654321
</div>
↓ Ceiling to 2 decimal places
<div class="kiriage2"></div>

JavaScript Code

We load the jquery-1.11.0.min.js file. Using Math.round, Math.floor, and Math.ceil, we process numbers to the specified digits for rounding, truncation, and ceiling, and return the results.

<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function() {

  // ↓ Rounding to 2 decimal places
  var s2 = sisyagonyu($('.sisyagonyu1').text(), 2);
  $('.sisyagonyu2').text(s2);

  // ↓ Truncation to 2 decimal places
  var ks2 = kirisute($('.kirisute1').text(), 2);
  $('.kirisute2').text(ks2);

  // ↓ Ceiling to 2 decimal places
  var ka2 = kiriage($('.kiriage1').text(), 2);
  $('.kiriage2').text(ka2);


  // Rounding
  function sisyagonyu(param, ketasu) {
    return Math.round(param * Math.pow(10, ketasu) ) / Math.pow(10, ketasu);
  }
  // Truncation
  function kirisute(param, ketasu) {
    return Math.floor(param * Math.pow(10, ketasu) ) / Math.pow(10, ketasu);
  }
  // Ceiling
  function kiriage(param, ketasu) {
    return Math.ceil(param * Math.pow(10, ketasu) ) / Math.pow(10, ketasu);
  }
});
</script>

Demo Page for Rounding, Truncation, and Ceiling Decimals with Specified Digits in JavaScript

We also provide a demo page with the implementation below, so please feel free to check it out.

Demo page for rounding, truncation, and ceiling decimals with specified digits in JavaScript

Summary

In this article, we learned how to round, truncate, and ceil decimal numbers with specified digits using JavaScript. These techniques are not only useful in programming but also practical for calculations in daily life and number processing in business scenarios. Understanding these basic mathematical functions is essential for advancing your programming learning, so be sure to master them thoroughly.

　
*If you reuse this code, please do so at your own responsibility.
Do not reuse the Google Analytics tag in the head section of the demo page.*