Rounding numbers html. Sorting a JSON-like structure
Often calculations produce results that are outside the desired ranges. As a result, it is necessary to implement JavaScript rounding up to a certain value.
Why round numbers?
JavaScript does not store integers because their values are represented as floating point numbers. Many fractions cannot be represented as a number with a specific finite number of decimal places, so JavaScript can generate results like the following:
0.1 * 0.2; > 0.020000000000000004
In practice this will not make any difference since we're talking about about an error of 2 quintillion. But this may affect the results when working with numbers that represent currency values, percentages, or file size. Therefore, you need to do or to a certain decimal place.
Rounding decimal numbers
To " trim» decimal number, the toFixed() or toPrecision() methods are used. They both take one argument, which specifies the number of significant and decimal places to be included in the result:
- if toFixed() has no argument specified, the default value is 0 , that is, no decimal places; maximum value argument is 20 ;
- if no argument is given to toPrecision(), the number is not changed.
Note
Both toFixed() and toPrecision return a rounded string representation of the result, rather than a number. This means that adding rounded to randNum will result in a concatenation of strings rather than a single number:
Console.log(randNum + rounded); > "6.256"
If you need to get in JavaScript result rounding to the nearest hundredth of a number, use parseFloat() :
Var randNum = 6.25; var rounded = parseFloat(randNum.toFixed(1)); console.log(rounded); > 6.3
toFixed() and toPrecision() are also useful methods for trimming large quantity decimal places. This is useful when working with numbers representing monetary units:
Var wholeNum = 1 var dollarsCents = wholeNum.toFixed(2); console.log(dollarsCents); > "1.00"
Note that if a number has more digits than the precision specified, toPrecision will output the result in scientific format:
Var num = 123.435 num.toPrecision(2); > "1.2e+2"
How to avoid mistakes when rounding decimals
In some cases toFixed and toPrecision implement JavaScript rounding 5 down, and not to more:
Var numTest = 1.005; numTest.toFixed(2); > 1;
The result of the above example should be 1.01, not 1. If you want to avoid this error, I recommend using exponential numbers:
Function round(value, decimals) ( return Number(Math.round(value+"e"+decimals)+"e-"+decimals); )
Application:
Round(1.005,2); > 1.01
If you need an even more robust solution than rounding, it is available at MDN.
Rounding with epsilon
Alternative method JavaScript rounding to tenths was introduced in ES6 ( also known as JavaScript 2015). "Machine epsilon" provides a reasonable margin of error when comparing two floating point numbers. Without rounding, comparisons can produce results similar to the following:
0.1 + 0.2 === 0.3 > false
Math.EPSILON can be used in a function to get a valid comparison:
Function epsEqu(x, y) ( return Math.abs(x - y)< Number.EPSILON * Math.max(Math.abs(x), Math.abs(y)); }
The function takes two arguments: one contains calculations, the second is expected ( rounded off) result. It returns a comparison of these two parameters:
EpsEqu(0.1 + 0.2, 0.3) > true
All modern browsers support ES6 math functions. But if you need to provide support in older browsers, then you need to use polyfills.
Truncation of decimal numbers
All methods presented previously perform JavaScript rounding to tenths. To truncate a positive number to two decimal places, multiply it by 100, truncate it again, and then divide the result by 100:
Function truncated(num) ( return Math.trunc(num * 100) / 100; ) truncated(3.1416) > 3.14
If you need something more flexible, you can use the bitwise operator:
Function truncated(num, decimalPlaces) ( var numPowerConverter = Math.pow(10, decimalPlaces); return ~~(num * numPowerConverter)/numPowerConverter; )
Usage:
Var randInt = 35.874993; truncated(randInt,3); > 35.874
Round to the nearest number
To implement JavaScript rounding to the nearest integer, Math.round() is used:
Math.round(4.3) > 4 Math.round(4.5) > 5
Note that " half values", such as .5, are rounded up.
Round down to the nearest whole number
If you want to round down, use the Math.floor() method:
Math.floor(42.23); > 42 Math.floor(36.93); > 36
Rounding" down" has one direction for all numbers, including negative ones. This can be imagined as a skyscraper with an infinite number of floors, including below the foundation level ( representing negative numbers). If you are in the elevator between basement floors 2 and 3 ( which corresponds to a value of -2.5), Math.floor will take you to floor -3:
Math.floor(-2.5); > -3
If you need to avoid this, use JavaScript Math rounding using Math.trunc() , supported in all modern browsers (except IE/Edge):
Math.trunc(-41.43); > -41
MDN also provides three-line polyfill to provide support for Math.trunc in older browsers and IE/Edge.
Round up to the nearest whole number
If you want to round decimal numbers up, use Math.ceil . The effect of this method can also be thought of as an endless elevator: Math.ceil always takes you " up", regardless of whether the number is negative or positive:
Math.ceil(42.23); > 43 Math.ceil(36.93); > 37 Math.ceil(-36.93); -36Round to the nearest multiple
If you need to round a value to the nearest multiple of 5, create a function that divides the number by 5, rounds it, and then multiplies the result by the same value:
Function roundTo5(num) ( return Math.round(num/5)*5; )
Usage:
RoundTo5(11); > 10
If you need JavaScript to round to two decimal places, you can pass both the seed and the multiple to the function:
Function roundToMultiple(num, multiple) ( return Math.round(num/multiple)*multiple; )
To use the function, include the number to be rounded and the multiple in its call:
Var initialNumber = 11; var multiple = 10; roundToMultiple(initialNumber, multiple); > 10;
To round values up or down only, replace round with ceil or floor in the function.
Range binding
Sometimes you need to get the value of x, which must be within certain range. For example, we need a value from 1 to 100, but we get the value 123. To fix this you can use min() ( returns the smallest number) and max ( returns the maximum allowed number).
Usage:
Var lowBound = 1; var highBound = 100; var numInput = 123; var clamped = Math.max(lowBound, Math.min(numInput, highBound)); console.log(clamped); > 100;
You can create a function or extension of the Number class:
Number.prototype.clamp = function(min, max) ( return Math.min(Math.max(this, min), max); );
Usage:
(numInput).clamp(lowBound, highBound);
Gaussian rounding
Gaussian rounding (" banking", convergent or Dutch) is a rounding method without statistical error. Standard JavaScript rounding sometimes gives errors big side. Gaussian rounding avoids this error by rounding to the nearest even number. The best decision which I know:
Function gaussRound(num, decimalPlaces) ( var d = decimalPlaces || 0, m = Math.pow(10, d), n = +(d ? num * m: num).toFixed(8), i = Math.floor (n), f = n - i, e = 1e-8, r = (f > 0.5 - e && f< 0.5 + e) ? ((i % 2 == 0) ? i: i + 1) : Math.round(n); return d ? r / m: r; }
Examples of using:
GaussRound(2.5) > 2 gaussRound(3.5) > 4 gaussRound(2.57,1) > 2.6
Decimals in CSS
Since JavaScript is often used to get position information or transform HTML elements, you might wonder what would happen if we generated decimal values for elements:
#box ( width: 63.667731993px; )
Modern browsers support decimal values in a block model, including percentage and pixel units.
The translation of the article “JavaScript Rounding Recipes” was prepared by the friendly team of the Website Building from A to Z project.
Often calculations produce results that are outside the desired ranges. As a result, it is necessary to implement JavaScript rounding up to a certain value.
Why round numbers?
JavaScript does not store integers because their values are represented as floating point numbers. Many fractions cannot be represented as a number with a specific finite number of decimal places, so JavaScript can generate results like the following:
0.1 * 0.2; > 0.020000000000000004
In practice, this will not make any difference, since we are talking about an error of 2 quintillionths. But this may affect the results when working with numbers that represent currency values, percentages, or file size. Therefore, you need to do or to a certain decimal place.
Rounding decimal numbers
To "cut" a decimal number, use the toFixed() or toPrecision() methods. They both take one argument, which specifies the number of significant and decimal places to be included in the result:
- if toFixed() has no argument specified, the default value is 0 , that is, no decimal places; the maximum argument value is 20 ;
- if no argument is given to toPrecision(), the number is not changed.
var randNum = 6.25; randNum.toFixed(); > "6" Math.PI.toPrecision(1); > "3" var randNum = 87.335; randNum.toFixed(2); > "87.33" var randNum = 87.337; randNum.toPrecision(3); > "87.3"
Note
Both toFixed() and toPrecision return a rounded string representation of the result, rather than a number. This means that adding rounded to randNum will result in a concatenation of strings rather than a single number:
console.log(randNum + rounded); > "6.256"
If you want JavaScript to round a number to the nearest hundredth, use parseFloat() :
var randNum = 6.25; var rounded = parseFloat(randNum.toFixed(1)); console.log(rounded); > 6.3
toFixed() and toPrecision() are also useful methods for truncating large numbers of decimal places. This is useful when working with numbers representing monetary units:
var wholeNum = 1 var dollarsCents = wholeNum.toFixed(2); console.log(dollarsCents); > "1.00"
Note that if a number has more digits than the precision specified, toPrecision will output the result in scientific format:
var num = 123.435 num.toPrecision(2); > "1.2e+2"
How to avoid mistakes when rounding decimals
In some cases toFixed and toPrecision implement JavaScript rounding 5 down, and not to more:
var numTest = 1.005; numTest.toFixed(2); > 1;
The result of the above example should be 1.01, not 1. If you want to avoid this error, I recommend using exponential numbers:
function round(value, decimals) ( return Number(Math.round(value+"e"+decimals)+"e-"+decimals); )
Application:
round(1.005,2); > 1.01
If you need an even more robust solution than rounding, it is available at MDN.
Rounding with epsilon
Alternative method JavaScript rounding to tenths was introduced in ES6 ( also known as JavaScript 2015). « Machine epsilon" provides a reasonable margin of error when comparing two floating point numbers. Without rounding, comparisons may produce results similar to the following:
0.1 + 0.2 === 0.3 > false
Math.EPSILON can be used in a function to get a valid comparison:
function epsEqu(x, y) ( return Math.abs(x - y)< Number.EPSILON * Math.max(Math.abs(x), Math.abs(y)); }
The function takes two arguments: one contains the calculations, the second the expected (rounded) result. It returns a comparison of these two parameters:
epsEqu(0.1 + 0.2, 0.3) > true
All modern browsers support ES6 math functions. But if you need to provide support in older browsers, then you need to use polyfills.
Truncation of decimal numbers
All methods presented previously perform JavaScript rounding to tenths. To truncate a positive number to two decimal places, multiply it by 100, truncate it again, and then divide the result by 100:
function truncated(num) ( return Math.trunc(num * 100) / 100; ) truncated(3.1416) > 3.14
If you need something more flexible, you can use the bitwise operator:
function truncated(num, decimalPlaces) ( var numPowerConverter = Math.pow(10, decimalPlaces); return ~~(num * numPowerConverter)/numPowerConverter; )
Usage:
var randInt = 35.874993; truncated(randInt,3); > 35.874
Round to the nearest number
To implement JavaScript rounding to the nearest integer, Math.round() is used:
Math.round(4.3) > 4 Math.round(4.5) > 5
Note that " half values", such as .5, are rounded up.
Round down to the nearest whole number
If you want to round down, use the Math.floor() method:
Math.floor(42.23); > 42 Math.floor(36.93); > 36
Rounding down has one direction for all numbers, including negative ones. This can be imagined as a skyscraper with an infinite number of floors, including below the foundation level ( representing negative numbers). If you are in the elevator between basement floors 2 and 3 ( which corresponds to a value of -2.5), Math.floor will take you to floor -3:
Math.floor(-2.5); > -3
If you need to avoid this, use JavaScript Math rounding using Math.trunc() , supported in all modern browsers (except IE/Edge):
Math.trunc(-41.43); > -41
MDN also provides three-line polyfill to provide support for Math.trunc in older browsers and IE/Edge.
Round up to the nearest whole number
If you want to round decimal numbers up, use Math.ceil . This method can also be thought of as an infinite elevator: Math.ceil always takes you “up”, regardless of whether the number is negative or positive:
Math.ceil(42.23); > 43 Math.ceil(36.93); > 37 Math.ceil(-36.93); -36
Round to the nearest multiple
If you need to round a value to the nearest multiple of 5, create a function that divides the number by 5, rounds it, and then multiplies the result by the same value:
function roundTo5(num) ( return Math.round(num/5)*5; )
Usage:
roundTo5(11); > 10
If you need JavaScript to round to two decimal places, you can pass both the seed and the multiple to the function:
function roundToMultiple(num, multiple) ( return Math.round(num/multiple)*multiple; )
To use the function, include the number to be rounded and the multiple in its call:
var initialNumber = 11; var multiple = 10; roundToMultiple(initialNumber, multiple); > 10;
To round values up or down only, replace round with ceil or floor in the function.
Range binding
Sometimes you need to get a value for x that must be within a certain range. For example, we need a value from 1 to 100, but we get the value 123. To fix this you can use min() ( returns the smallest number) and max ( returns the maximum allowed number).
Usage:
var lowBound = 1; var highBound = 100; var numInput = 123; var clamped = Math.max(lowBound, Math.min(numInput, highBound)); console.log(clamped); > 100;
You can create a function or extension of the Number class:
Number.prototype.clamp = function(min, max) ( return Math.min(Math.max(this, min), max); );
Usage:
(numInput).clamp(lowBound, highBound);
Gaussian rounding
Gaussian rounding (“banking”, convergent or Dutch) is a rounding method without statistical error. Standard JavaScript rounding sometimes gives errors in a larger direction. Gaussian rounding avoids this error by rounding to the nearest even number. Best solution I know of.
Hello. Today in the column about Javascript we will look at how to set the number of decimal places in floating point numbers in javascript. For example, you need to leave 3 decimal places when outputting, or only two.
Task: javascript number of decimal places
So, we are faced with a task: there is a result of calculations in which there are numbers before the decimal point and after the decimal point. Decimal. Let's say the result is like this: 1538.9891200153. But when outputting, you should get a number reflecting the amount, where the number of banknotes before the decimal point, and the number of kopecks after the decimal point.
There are several ways to solve this problem.
Solution 1: javascript number of decimal places using toFixed method
toFixed is a built-in javascript method that applies to any number, taking rounding precision (that is, the number of decimal places) as a parameter.
Var num=1538.9891200153; num_str=num.toFixed(); //num_str=1538; num_str=num.toFixed(2); //num_str=1538.98; num_str=num.toFixed(5); //num_str=1538.98912;
The precision parameter in this function must be no less than 0 (does not accept negative values) and no more than 20.
You can also do without a variable, for example like this:
Num_str=(1538.9891200153).toFixed(2); //num_str=1538.98;
Solution 2: javascript number of decimal places using toPrecision method
This solution is based on the same built-in javascript method. Distinctive feature This method is that the parameter taken as input does not indicate the precision (the number of decimal places), but the total number of decimal places (both before and after the decimal point).
Var num=1538.9891200153; num_str=num.toPrecision(5); //num_str=1538.9; num_str=num.toPrecision(7); //num_str=1538.989;
Solution without decimal places: javascript number of decimal places
If the decimal places need to be completely removed, that is, you need to round a fractional number to an integer, then you can use the functions of the Math class: round, ceil and floor.
Round - rounds up or down (depending on the number). If the value after the decimal point is more than half, it will be rounded up, if less, it will be rounded down. That is, if 0.51 becomes 1, if 0.49 becomes 0.
Ceil - from English. The ceiling always rounds upward.
Floor - from English. The floor always rounds down.
Var num = 1538.9891200153; num_str=Math.round(num); //num_str=1539; num_str=Math.floor(num); //num_str=1538; num_str=Math.ceil(num); //num_str=1539;
That's all. I hope this note helped you solve your problem. If something doesn’t work out, ask questions using the green “Ask an Expert” button or in the comments.