Guide to handling decimals in JavaScript numerical calculation results

This tutorial details various ways to handle the decimal part of calculation results in JavaScript. In response to the problem that floating-point calculations may produce lengthy decimals, this article will deeply explore the usage scenarios, features and code examples of core functions such as `Math.floor()`, `Math.round()`, `parseInt()` and `toFixed()`, aiming to help developers accurately control the display format of numerical values ​​and ensure that calculation results meet expectations.

In numerical calculations in JavaScript, especially when it comes to floating-point calculations, the results often have lengthy decimal parts, which is undesirable in many scenarios. For example, when you need to display calculation results as integers, or only retain a certain number of decimal places, you need to process these values. This article will introduce several commonly used JavaScript methods to help developers effectively remove or control the decimal part of a value.

Why you need to deal with decimals

Numbers in JavaScript are double-precision 64-bit floating point numbers, which makes it possible for certain simple arithmetic operations to produce seemingly imprecise results as well (e.g. 0.1 0.2 is not equal to 0.3, but 0.30000000000000004). Additionally, in user interface presentations, financial calculations, or any scenario that requires precise integer or fixed decimal representation, directly displaying numbers with a large number of decimal places can reduce readability or even lead to logic errors.

Detailed explanation of core methods

JavaScript provides a variety of built-in methods for handling the decimal part of a number, each with its own specific purpose and behavior.

1. Math.floor(): round down

The Math.floor() method rounds a number down to the nearest integer. This means that it truncates the fractional part directly, regardless of its size.

Features:

• Always round down.
• Return an integer.

Sample code:

 let num1 = 5.0214;
let num2 = 5.9;
let num3 = -5.1;
let num4 = -5.9;

console.log(Math.floor(num1)); // Output: 5
console.log(Math.floor(num2)); // Output: 5
console.log(Math.floor(num3)); // Output: -6 (rounded towards negative infinity)
console.log(Math.floor(num4)); // Output: -6

2. Math.round(): Rounding

The Math.round() method rounds a number to the nearest integer. If the decimal part is greater than or equal to 0.5, round up; otherwise, round down.

Features:

• Follow standard rounding rules.
• Return an integer.

Sample code:

 let num1 = 5.0214;
let num2 = 5.9;
let num3 = 5.5;
let num4 = -5.1;
let num5 = -5.6;

console.log(Math.round(num1)); // Output: 5
console.log(Math.round(num2)); // Output: 6
console.log(Math.round(num3)); // Output: 6
console.log(Math.round(num4)); // Output: -5
console.log(Math.round(num5)); // Output: -6

3. parseInt(): Parse integers

The parseInt() function is mainly used to parse a string parameter and return an integer in a specified base (base). When it operates on a numeric type, it is treated as a string and the decimal part is truncated.

Features:

• Truncate the decimal part directly without rounding.
• Designed primarily for string parsing, there may be a slight performance disadvantage when used with numbers (although negligible for most front-end applications).
• If the argument is not a string, it first attempts to convert it to a string.

Sample code:

 let num1 = 5.0214;
let num2 = 5.9;
let num3 = -5.1;

console.log(parseInt(num1)); // Output: 5
console.log(parseInt(num2)); // Output: 5
console.log(parseInt(num3)); // Output: -5

4. toFixed(): Specify the number of decimal places (return a string)

The toFixed() method uses fixed-point notation to format a number. It rounds the number to the specified number of decimal places and returns a string. If no argument is provided, it will default to 0 decimal places, i.e. return a string representation of an integer.

Features:

• You can specify the number of decimal places to retain.
• Rounding will occur.
• Returns a string , not a number. If subsequent mathematical operations are required, it needs to be converted back to a numeric type (such as using Number() or the unary plus operator).

Sample code:

 let myNumber = 5.0214;
let myOtherNumber = 5.9;

console.log(myNumber.toFixed(2)); // Output: "5.02"
console.log(myNumber.toFixed(1)); // Output: "5.0"
console.log(myNumber.toFixed()); // Output: "5" (default 0 decimal places)
console.log(myOtherNumber.toFixed()); // Output: "6"
console.log(myNumber.toFixed(4)); // Output: "5.0214"
console.log(myNumber.toFixed(0)); // Output: "5"

// Note: toFixed() returns a string let fixedString = myOtherNumber.toFixed();
console.log(typeof fixedString); // Output: "string"
let numValue = Number(fixedString);
console.log(typeof numValue); // Output: "number"

Practical application examples

Suppose that in a dynamic calculation scenario, the value pages of the slider needs to be multiplied or divided by a coefficient, and the result is displayed in the page element without decimals. The following is an example of applying the toFixed() method:

 function do_on_range_change_pages() {
    let pages = /* Get the current value of the slider, for example from an input box*/; // Assume pages is a number, such as 5000 - 100000

    // Display the original value $('.betrag').text(pages);

    // Apply the toFixed() method to the calculation result to remove decimals $('.name1').text((pages * 0.001).toFixed());
    $('.name2').text((pages * 0.03).toFixed());
    $('.name3').text((pages / 22).toFixed());
}

// Sample call (in actual applications, this function will be triggered when the slider value changes)
// do_on_range_change_pages();

In this example, .toFixed() is called directly after the calculation result, ensuring that the final text displayed on the page is an integer without decimals (because toFixed() retains 0 decimal places by default).

Things to note

1. Choose the appropriate method:
   • If you need to round down (truncate decimals), use Math.floor() or parseInt().
   • If you need to round to the nearest integer, use Math.round().
   • If you need to format to a specific number of decimal places and return a string, use toFixed(n).
2. The return value of toFixed(): toFixed() returns a string. If you need to perform mathematical operations on this value later, be sure to convert it back to a numeric type, such as Number((pages * 0.001).toFixed()).
3. Performance considerations: For most front-end applications, the performance difference between these methods is negligible. But in extremely performance-sensitive scenarios, Math.floor() and Math.round() are usually slightly faster than parseInt() because they operate directly on numbers, while parseInt() involves string conversion.
4. Negative number processing: Math.floor() rounds negative numbers down (for example, Math.floor(-5.1) is -6), while parseInt() truncates decimals (for example, parseInt(-5.1) is -5). Math.round() handles negative numbers according to rounding rules. Understanding these differences is crucial for working with negative numbers.

Summarize

Handling the decimal part of a numerical value in JavaScript is a common need in daily development. By mastering the core methods of Math.floor(), Math.round(), parseInt() and toFixed(), developers can flexibly choose according to specific scenarios and accurately control the display format and accuracy of numerical values. Understanding their respective characteristics and return value types, especially the characteristics of toFixed() returning a string, is the key to avoiding potential errors.

The above is the detailed content of Guide to handling decimals in JavaScript numerical calculation results. For more information, please follow other related articles on the PHP Chinese website!