Simple rounding rules in javascript. We study methods and put them into practice

Often calculations give results that do not fit within the desired ranges. As a result, it is necessary to 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 by a number with a certain finite number of decimal places, so JavaScript can generate results like the following:

0.1 * 0.2; > 0.020000000000000004

In practice, this will not matter, since we are talking about an error of 2 quintillion. But this can affect the result when working with numbers that represent currency values, percentages, or file sizes. Therefore, you need to do or up to a certain decimal place.

Rounding decimals

To "trim" a decimal number, use the toFixed() or toPrecision() methods. They both take one argument, which specifies the number of significant and decimal places to include in the result:

• if no argument is specified for toFixed() , the default value is 0 , that is, no decimal places; the maximum value of the argument 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, not a number. This means that adding rounded to randNum will result in string concatenation rather than a single number:

console.log(randNum + rounded); > "6.256"

If you want JavaScript to round to hundredths, 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 that represent monetary units:

var wholeNum = 1 var dollarsCents = wholeNum.toFixed(2); console.log(dollarsCents); > "1.00"

Note that if the number has more digits than the precision parameter, toPrecision will return 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 do JavaScript round 5 down, and not up to more:

var numTest = 1.005; numTest.toFixed(2); > 1;

The result of the example above 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's 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 the calculation, the second is 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.

Decimal truncation

All methods presented earlier perform JavaScript rounding to tenths. To truncate a positive number to two decimal places, multiply it by 100 , truncate 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

Rounding to the nearest number

To carry out JavaScript round to 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.

Rounding 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 an elevator between basement floors 2 and 3 ( which corresponds to the value -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 with Math.trunc() , which is supported in all modern browsers (except IE/Edge):

Math.trunc(-41.43); > -41

MDN also provides 3-line polyfill to provide support for Math.trunc in older browsers and IE/Edge.

Rounding up to the nearest whole number

If you want to round up decimal numbers, use Math.ceil . You can also think of this method 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

Rounding to nearest multiple

If you want to round a value to the nearest multiple of 5 , create a function that divides the number by 5 , rounds it up, 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 to perform JavaScript rounding to two decimal places, you can pass both the seed and the multiplicity 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 multiplicity in its call:

var initialNumber = 11; var multiple = 10; roundToMultiple(initialNumber, multiple); > 10;

To round values ​​only up or down, replace the round function with ceil or floor .

Binding to a range

Sometimes you need to get the value of x, which must be within a certain range. For example, we want a value between 1 and 100 , but we get a value of 123 . To fix this, you can use min() ( returns the smallest of the numbers) and max( returns the maximum allowed number).

Usage:

var lowBound = 1; varhighBound = 100; varnumInput = 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.

In this article, we will take a closer look at numbers, mathematical operators, ways to convert a number to a string and vice versa, as well as many other important points.

isFinite function

The isFinite function allows you to check if an argument is a finite number.

This function returns false as a response if the argument is Infinity , -Infinity , NaN , or would be cast to one of these special numeric values. Otherwise, this function will return true .

IsFinite(73); // true isFinite(-1/0); // false isFinite(Infinity); // false isFinite(NaN); // false isFinite("Text"); // false

In addition to the isFinite global function, JavaScript also has the Number.isFinite method. It, unlike isFinite, does not force the argument to be converted to a number.

IsFinite("73"); // true Number.isFinite("73"); // false

isNaN function

The isNaN function is for determining if an argument is a number or can be converted to one. If so, then the isNaN function returns false. Otherwise it returns true.

IsNaN(NaN); //true isNaN("25px"); //true, because 20px is not a number isNaN(25.5); //false isNaN("25.5"); //false isNaN(" "); //false, because a space or multiple spaces is converted to 0 isNaN(null); //false, because null value is converted to 0 isNaN(true); //false, because true is converted to 1 isNaN(false); //false, because false value is converted to 0

If this action needs to be performed without a type cast, then use the Number.isNaN method. This method has been introduced into the language since ECMAScript 6.

How to explicitly convert a string to a number?

You can explicitly cast a string to a number using the following methods:

1. Use unary operator + The to be placed before the value.

+"7.35"; // 7.35 +"text"; // NaN

This method ignores spaces at the beginning and end of the line, as well as \n (line feed).

+"7.35"; //7.35 +"7.35\n"; //7.35

When using this method, you need to pay attention to the fact that an empty string or a string consisting of spaces and \n is translated into the number 0. In addition, it also converts the null data type and boolean values ​​to a number.

Null; //0 +true; //1 +false; //0 +" "; //0

2. Function parseInt . This function is designed to convert argument to an integer. As opposed to using unary operator +, this method allows you to convert a string into a number, in which not all characters are numeric. It starts to convert the string, starting from the first character. And as soon as it encounters a character that is not a numeric character, this function stops its work and returns the resulting number.

ParseInt("18px"); //18 parseInt("33.3%"); //33

This function can work with different number systems (binary, octal, decimal, hexadecimal). The indication of the base of the number system is carried out by means of 2 arguments.

ParseInt("18px", 10); //18 parseInt("33.3%", 10); //33 parseInt("101",2); //5 parseInt("B5",16); //181

In addition to the parseInt function, JavaScript has the Number.parseInt method. This method is no different from the parseInt function and was introduced to JavaScript with the ECMASCRIPT 2015(6) specification.

3. Function parseFloat . The parseFloat function is similar to parseInt , except that it allows you to convert the argument to a fractional number.

ParseFloat("33.3%"); //33.3

In addition, the parseFloat function, unlike parseInt, does not have 2 arguments, and therefore it always tries to treat the string as a number in decimal notation.

ParseFloat("3.14"); parseFloat("314e-2"); parseFloat("0.0314E+2");

In addition to the parseFloat function, JavaScript has the Number.parseFloat method. This method is no different from the parseFloat function and was introduced to JavaScript with the ECMASCRIPT 2015(6) specification.

Convert number to string

You can turn a number into a string using the toString method.

(12.8).toString(); //"12.8"

The toString method also allows you to specify the base of the number system, taking into account which you must explicitly cast the number to the string:

(255).toString(16); //"ff"

How to check if a variable is a number

You can determine whether the value of a variable is a number using one of the following methods:

1. Using the isNaN and isFinite functions:

// myVar is a variable if (!isNaN(parseFloat(myVar)) && isFinite(parseFloat(myVar))) ( //myVar is a number or can be cast to it );

As a function:

// function function isNumeric(value) ( ​​return !isNaN(parseFloat(value)) && isFinite(parseFloat(value)); ) // usage var myVar = "12px"; console.log(isNumeric(myVar)); //true

This method allows you to determine whether the specified value is a number or can be converted to it. This variant does not count an empty string, a string of spaces, null , Infinity , -Infinity , true and false as a number.

2. Using the typeof operator and the isFinite, isNaN functions:

// function that checks if the value is a number function isNumber(value) ( ​​return typeof value === "(!LANG:number" && isFinite(value) && !isNaN(value); }; // использование функции isNumber isNumber(18); //true // использование функций для проверки текстовых значений isNumber(parseFloat("")); //false isNumber(parseFloat("Infinity")); //false isNumber(parseFloat("12px")); //true !}

This function determines whether the specified value is of type Number and is not one of the special values ​​Infinity, -Infinity, and NaN. If so, then this function returns true.

3. Using the ECMAScript 6 Number.isInteger(value) method. This method allows you to determine whether the specified value is an integer.

Number.isInteger("20"); //false, because this method does not translate the string into a number Number.isInteger(20); //true, because given value is a number

Even and odd numbers

You can check if a number is even or odd using the following functions:

// Function to check if a number is even function isEven(n) ( return n % 2 == 0; ) // Function to check if a number is odd function isOdd(n) ( return Math.abs(n % 2) == 1; )

But before carrying out such a check, it is desirable to make sure that the specified value is a number:

value=20; if (Number.isInteger(value)) ( if (isEven(value)) ( console.log("Number " + value.toString() + " - even"); ) )

Prime Numbers in Javascript

Consider an example in which we display prime numbers from 2 to 100 using Javascript.

// A function that checks if a number is prime function isPrime(value) ( ​​if (isNaN(value) || !isFinite(value) || value%1 || value< 2) return false; var max=Math.floor(Math.sqrt(value)); for (var i = 2; i< = max; i++) { if (value%i==0) { return false; } } return true; } // создать массив, который будет содержать простые числа от 2 до 100 var primaryNumber = ; for (var i = 2; i <= 100; i++) { if(isPrime(i)) primaryNumber.push(i); } // вывести в консоль простые числа от 2 до 100 console.log(primaryNumber);

Rounding a Number in Javascript

There are various ways to round a fractional number to an integer value in JavaScript.

1. Using the Math.floor , Math.ceil and Math.round methods specially designed for this. The Math.floor method rounds a fractional number down to the nearest integer, i.e. simply discards the fractional part. Math.ceil rounds a fractional number up to the nearest integer. Math.round rounds a number up or down depending on the value of the fractional part. If the fractional part is greater than or equal to 0.5, then up, otherwise the scroll is down.

Console.log(Math.floor(7.9)); //7 console.log(Math.ceil(7.2)); //8 console.log(Math.round(7.5)); //eight

2. Using the toFixed(precision) method. This method rounds the fractional part of a number to the specified precision. The rounding result is returned as a string.

Console.log(7.987.toFixed(2)); //"7.99"

If there are not enough decimal places to form the specified accuracy of the number, then it is padded with zeros.

Console.log(7.987.toFixed(5)); //"7.98700"

3. Through the toPrecision(precision) method. This method represents a number with the specified precision. At the same time, he can round not only the fractional, but also the whole part of the number. The resulting number can be represented by this method depending on the result in a fixed point or in exponential form.

Console.log((1001).toPrecision(2)); //"1.0e+3" console.log((1001).toPrecision(5)); //"1001.0" console.log((12.4).toPrecision(1)); //"1e+1" console.log((12.4).toPrecision(2)); //"12" console.log((12.4).toPrecision(3)); //"12.4" console.log((12.4).toPrecision(5)); //"12.400"

4. Using logical NOT or OR operators.

//via double logical negation console.log(~~7.9); //7 // by using logical OR with zero: console.log(7.9^0); //7

Integer and fractional part of a number

You can get the integer part of a number using the Math.floor() and parseInt() methods:

Console.log(Math.floor(7.21)); // 7 console.log(parseInt(7.21)); // 7

You can get the fractional part of a number using the percentage (%) operator. This operator returns the remainder that will be obtained from dividing the first number by the second. In this case, 1 should be used as the 2nd number.

Console.log(7.21%1); // 0.20999999999999996 // accurate to 2 decimal places console.log((7.21%1).toFixed(2)); // "0.21"

In addition, the fractional part can also be obtained using calculations:

var number = 7.21; var fractionNumber = number - Math.floor(Math.abs(number)); console.log(fractionNumber); // 0.20999999999999996

Is the number divisible

You can determine if a number is evenly divisible using the percentage operator:

varnumber = 9; // if the remainder of dividing number by 3 is 0, then yes, otherwise no if (number%3==0) ( console.log ("The number " + number + " is divisible by 3"); ) else ( console. log("Number " + number + " is not divisible by 3"); )

Number Formatting

In JavaScript, the toLocaleString() method allows you to format the output of a number according to locale (language settings of the operating system).

For example, let's format a number according to the regional standards that are installed in the system by default:

var number = 345.46; console.log(number.toLocaleString()); //"345,46"

For example, let's format a number in accordance with the regional standards of Russia (ru):

Console.log((108.1).toLocaleString("ru-RU")); //"108.1"

This method can also be used to format a number as a currency:

Console.log((2540.125).toLocaleString("ru-RU",(style:"currency", currency:"RUB"))); //"2,540.13 ₽" console.log((89.3).toLocaleString("ru-RU",(style:"currency", currency:"USD"))); //"$89.30" console.log((2301.99).toLocaleString("ru-RU",(style:"currency", currency:"EUR"))); //"€2,301.99"

Representing a number as a percentage:

Console.log((0.45).toLocaleString("ru-RU",(style:"percent"))); //"45%"

Split the number into digits (useGrouping property):

Console.log((125452.32).toLocaleString("ru-RU",(useGrouping:true))); //"125 452.32"

Print a number with a certain number of digits (2) after the decimal point:

Console.log((1240.4564).toLocaleString("ru-RU",(minimumFractionDigits:2, maximumFractionDigits:2))); //"1240.46"

Number Comparison

The following operators are used to compare numbers in JavaScript: == (equal to), != (not equal to), > (greater than),< (меньше), >= (greater than or equal),<= (меньше или равно).

For example, let's compare two numbers:

Console.log(2>3); //false console.log(5>=3); //true

When comparing numbers with a fractional part, it is necessary to take into account the errors that may occur during these calculations.

For example, in JavaScript, the sum of the numbers (0.2 + 0.4) does not equal 0.6:

Console.log((0.2+0.4)==0.6); //false

Errors occur because all calculations are made by a computer or other electronic device in the 2nd number system. Those. before performing any actions, the computer must first convert the numbers presented in the expression to the 2 number system. But, not any fractional decimal number can be represented exactly in the 2nd number system.

For example, the number 0.25 10 is converted to binary exactly.

0.125 × 2 = 0.25 | 0 0.25 × 2 = 0.5 | 0 0.5 × 2 = 1 | 1 0.125 10 = 0.001 2

For example, the number 0.2 10 can be converted to the 2 system only with a certain accuracy:

0.2 × 2 = 0.4 | 0 0.4 × 2 = 0.8 | 0 0.8 × 2 = 1.6 | 1 0.6 × 2 = 1.2 | 1 0.2 × 2 = 0.4 | 0 0.4 × 2 = 0.8 | 0 0.8 × 2 = 1.6 | 1 0.6 × 2 = 1.2 | 1 0.2 × 2 = 0.4 | 0 0.4 × 2 = 0.8 | 0 0.8 × 2 = 1.6 | 1 0.6 × 2 = 1.2 | 1 ... 0.2 10 = 0.001100110011... 2

As a result, these errors will affect the calculation of the sum of two numbers and the comparison results. Those. it turns out that in fact JavaScript will see this entry as follows:

0.6000000000000001==0.6

When calculating or displaying numbers with a fractional part, you must always specify the precision with which this is to be done.

For example, compare numbers up to 2 decimal places using the toFixed() and toPrecision() methods:

//method toFixed() console.log((0.2+0.4).toFixed(2)==(0.6).toFixed(2)); //true //toPrecision() method console.log((0.2+0.4).toPrecision(2)==(0.6).toPrecision(2)); //true

Basic math operations

JavaScript has the following mathematical operators: + (addition), - (subtraction), * (multiply), / (division), % (remainder of division), ++ (increase value by 1), -- (decrease value by 1 ).

6+3 //9 6-3 //3 6*3 //18 6/3 //2 6%3 //0, i.e. 6:3=2 => 6-3*2 => rest(0) 5%2 //1, i.e. 5:2=2(.5) => 5-2*2 => rest(1) 7.3%2 //1.3, i.e. 7.3:2=3(.65) => 7.3-2*3 => rest(1.3) //the sign of the operation result % is equal to the sign of the first value -9%2.5 //-1.5, i.e. 9:2.5=3(.6) => 9-2.5*3 => rest(1.5) -9%-2.5 //-1.5, i.e. 9:2.5=3(.6) => 9-2.5*3 => rest(1.5) -2%5 //-2, i.e. 2:5=0(.4) => 2-5*0 => rest(2) x = 3; console log(x++); //displays 3, then sets y to 4 console.log(x); //4 x = 3; console log(++x); //sets 4 and outputs x = 5; console log(x--); //outputs 5, y then sets 4 console.log(x); //4 x = 5; console log(--x); //sets to 4 and outputs In addition, there are combined operators in JavaScript: x+=y (x=x+y), x-=y (x=x-y), x*=y (x=x*y), x/= y (x=x/y), x%=y (x=x%y). x=3; y=6; x+=y; console log(x); //9 x = 3; y=6; x-=y; console log(x); //-3 x = 3; y=6; x*=y; console log(x); //18 x = 3; y=6; x/=y; console log(x); //0.5 x = 3; y=6; x%=y; console log(x); //3

Very often, calculations in JavaScript do not give exactly the results that we want. Of course, we can do anything with numbers - round up or down, set ranges, cut off unnecessary numbers to a certain number of decimal places, it all depends on what you want to do with this number in the future.

Why is rounding necessary?

One of the curious aspects of JavaScript is that it doesn't actually store integers, we're working with floating point numbers right away. This, combined with the fact that many fractional values ​​cannot be expressed with a finite number of decimal places, in JavaScript we can get results like this:

0.1 * 0.2; > 0.020000000000000004 0.3 - 0.1 > 0.19999999999999998
For practical purposes, this inaccuracy does not matter, in our case we are talking about an error in quintillion shares, however, this may disappoint someone. We can also get some strange results when working with numbers that represent currencies, percentages, or file sizes. In order to correct these inaccuracies, we just need to be able to round the results, and it is enough to set the decimal precision.

Rounding numbers has a practical use, we can manipulate a number in some range, for example we want to round a value to the nearest whole number instead of working only with the decimal part.

Rounding decimals

To trim a decimal number, use toFixed or the toPrecision method. Both of them take a single argument, which determines, respectively, how many significant digits (i.e. the total number of digits used in the number) or decimal places (the number after the decimal point) the result should include:

1. If the argument is not defined for toFixed(), then it will default to zero, which means 0 decimal places, the argument has a maximum value of 20.
2. If no argument is given to toPrecision, the number is left untouched

let randNum = 6.25; randNum.toFixed(); > "6" Math.PI.toPrecision(1); > "3" randNum = 87.335; randNum.toFixed(2); > "87.33" randNum = 87.337; randNum.toPrecision(3); > "87.3"
Both the toFixed() and toPrecision() methods return a string representation of the result, not a number. This means that when summing the rounded value with randNum , strings will be concatenated, not numbers added:

Let randNum = 6.25; let rounded = randNum.toFixed(); // "6" console.log(randNum + rounded); > "6.256"
If you want the result to be of a numeric data type, then you will need to use parseFloat:

Let randNum = 6.25; let rounded = parseFloat(randNum.toFixed(1)); console log(rounded); > 6.3
Note that 5 values ​​are rounded except in rare cases.

The toFixed() and toPrecision() methods are useful, because they can not only cut off the fractional part, but also pad the decimal places, which is convenient when working with currencies:

Let wholeNum = 1 let dollarsCents = wholeNum.toFixed(2); console.log(dollarsCents); > "1.00"
Note that toPrecision will return the result in exponential notation if the number of integers is greater than the precision itself:

Let num = 123.435 num.toPrecision(2); > "1.2e+2"

How to Avoid Rounding Errors with Decimals

In some cases, toFixed and toPrecision will round the value 5 down and up:

Let numTest = 1.005; numTest.toFixed(2); > "1.00"
The result of the calculation above should have been 1.01, not 1. If you want to avoid this kind of error, we can use the solution suggested by Jack L Moore, which uses exponential numbers for the calculation:

Function round(value, decimals) ( return Number(Math.round(value+"e"+decimals)+"e-"+decimals); )
Now:

Round(1.005,2); > 1.01
If you want a more robust solution than the one shown above, you can go to MDN.

Machine epsilon rounding

An alternative method for rounding decimal numbers was introduced in ES6. Machine epsilon rounding 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
We use Math.EPSILON in our function to get the correct 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: the first is the current calculation, the second is the expected result. It returns a comparison of the two:

EpsEqu(0.1 + 0.2, 0.3) > true
All modern browsers already support ES6 math functions, but if you want support in browsers like IE 11 use polyfills .

Fractional clipping

All methods presented above are able to round to decimal numbers. In order to simply cut off a number to two decimal places, you must first multiply it by 100, and then divide the result by 100:

Function truncated(num) ( return Math.trunc(num * 100) / 100; ) truncated(3.1416) > 3.14
If you want to adapt the method to any number of decimal places, you can use bitwise double negation:

Function truncated(num, decimalPlaces) ( let numPowerConverter = Math.pow(10, decimalPlaces); return ~~(num * numPowerConverter)/numPowerConverter; )
Now:

Let randInt = 35.874993; truncated(randInt,3); > 35.874

Rounding to the nearest number

To round a decimal number up or down to the nearest number, depending on what we're closest to, use Math.round():

Math.round(4.3) > 4 Math.round(4.5) > 5
Note that "half the value", 0.5 is rounded up by the rules of mathematics.

Rounding down to the nearest whole number

If you want to always round down, use Math.floor:

Math.floor(42.23); > 42 Math.floor(36.93); > 36
Note that rounding down works for all numbers, including negative numbers. Imagine a skyscraper with an infinite number of floors, including lower level floors (representing negative numbers). If you are in an elevator at the bottom level between 2 and 3 (which is a value of -2.5), Math.floor will take you to -3:

Math.floor(-2.5); > -3
But if you want to avoid this kind of situation, use Math.trunc , which is supported in all modern browsers (except IE/Edge):

Math.trunc(-41.43); > -41
On MDN you will find a polyfill that will provide support for Math.trunc in browsers and IE/Edge.

Rounding up to the nearest whole number

On the other hand, if you need to always round up, use Math.ceil. Again, remembering the infinite elevator: Math.ceil will always go "up", whether the number is negative or not:

Math.ceil(42.23); > 43 Math.ceil(36.93); > 37 Math.ceil(-36.93); > -36

Round up/down as needed

If we want to round up to the nearest multiple of 5, the easiest way is to create a function that divides a number by 5, rounds it up, and then multiplies it by the same amount:

Function roundTo5(num) ( return Math.round(num/5)*5; )
Now:

RoundTo5(11); > 10
If you want to round to multiples of your value, we use a more general function, passing in the initial value and a multiple:

Function roundToMultiple(num, multiple) ( return Math.round(num/multiple)*multiple; )
Now:

Let initialNumber = 11; let multiple = 10; roundToMultiple(initialNumber, multiple); > 10;

Fixing a number in a range

There are many cases where we want to get an x ​​value that is within a range. For example, we might want a value from 1 to 100, but we ended up with a value of 123. To fix this, we can use min (returns the smallest of a set of numbers) and max (returns the largest of any set of numbers). In our example, the range is from 1 to 100:

Let lowBound = 1; let highBound = 100; let numInput = 123; let clamped = Math.max(lowBound, Math.min(numInput, highBound)); console log(clamped); > 100;
Again, we can reuse the operation and wrap it all in a function, using the solution suggested by Daniel X. Moore :

Number.prototype.clamp = function(min, max) ( return Math.min(Math.max(this, min), max); );
Now:

NumInput.clamp(lowBound, highBound); > 100;

Gaussian rounding

Gaussian rounding, also known as banker's rounding, is that the rounding for this case is to the nearest even number. This rounding method works without statistical error. The best solution was suggested by Tim Down:

Function gaussRound(num, decimalPlaces) ( let 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; }
Now:

GaussRound(2.5) > 2 gaussRound(3.5) > 4 gaussRound(2.57,1) > 2.6
Decimal point in CSS:

Since JavaScript is often used to create positional transforms for HTML elements, you might be wondering what happens if we generate decimal values ​​for our elements:

#box ( width: 63.667731993px; )
The good news is that modern browsers will respect decimal values ​​in the box model, including percentage or pixel units.

Sorting

Very often we need to sort some elements, for example, we have an array of game records, while they must be organized in descending order of the rank of the players. Unfortunately, the standard sort() method has some surprising limitations: it works well with commonly used English words, but breaks down immediately when it encounters numbers, unique characters, or uppercase words.

Sort alphabetically

It would seem that sorting an array alphabetically should be the simplest task:

Let fruit = ["butternut squash", "apricot", "cantaloupe"]; fruit sort(); > "apricot", "butternut squash", "cantaloupe"]
However, we run into a problem as soon as one of the elements is in upper case:

Let fruit = ["butternut squash", "apricot", "Cantalope"]; fruit sort(); > "Cantaloupe", "apricot", "butternut squash"]
This is because, by default, the sorter compares the first character represented in Unicode . Unicode is a unique code for any character, regardless of platform, regardless of program, regardless of language. For example, when looking at the code table, the character "a" has the value U+0061 (hexadecimal 0x61), while the character "C" has the code U+0043 (0x43), which comes before the character in the Unicode table. "a".

To sort an array that may contain mixed case first letters, we need to either convert all elements temporarily to lower case, or define our own sort order using the localeCompare() method with some arguments. As a rule, for such a case, it is better to immediately create a function for multiple use:

Function alphaSort(arr) ( arr.sort(function (a, b) ( return a.localeCompare(b, "en", ("sensitivity": "base")); )); ) let fruit = ["butternut squash ", "apricot", "Cantaloupe"]; alphaSort(fruit) >
If you want to get an array sorted in reverse alphabetical order, just swap the positions of a and b in the function:

Function alphaSort(arr) ( arr.sort(function (a, b) ( return b.localeCompare(a, "en", ("sensitivity": "base")); )); ) let fruit = ["butternut squash ", "apricot", "Cantaloupe"]; alphaSort(fruit) > ["Cantaloupe", "butternut squash", "apricot"]
Here it is worth noting that localeCompare is used with arguments, we also need to remember that it is supported by IE11+, for older versions of IE, we can use it without arguments, and in lower case:

Function caseSort(arr) ( arr.sort(function (a, b) ( return a.toLowerCase().localeCompare(b.toLowerCase()); )); ) let fruit = ["butternut squash", "apricot", "Cantaloupe"]; caseSort(fruit) > ["apricot", "butternut squash", "Cantaloupe"]

Numeric sort

All this does not apply to the example that we talked about above about the array of game records. With some numeric arrays, sorting works just fine, but at some point the result can be unpredictable:

Let highScores = ; sort(); >
The fact is that the sort() method performs a lexicographic comparison: which means that the numbers will be converted to a string and comparisons will again be made by matching the first character of this string in the order of the characters of the Unicode table. Therefore, we again need to define our sort order:

Let highScores = ; highScores.sort(function(a,b) ( return a - b; )); >
Again, to sort the numbers in reverse order, swap the positions of a and b in the function.

Sorting a JSON-like structure

And finally, if we have a JSON-like data structure represented as an array of game records:

Let scores = [ ( "name": "Daniel", "score": 21768 ), ( "name": "Michael", "score": 33579 ), ( "name": "Alison", "score": 38395 )];
In ES6+, you can use arrow functions:

Scores.sort((a, b) => b.score - a.score));
For older browsers that do not have this support:

Scores.sort(function(a, b) ( return a.score - b.score ));
As you can see, sorting in JavaScript is a rather non-obvious thing, I hope these examples make life easier somehow.

Working with Power Functions

Exponentiation is an operation originally defined as the result of multiplying a natural number by itself, the square root of a is the number that gives a when squared. We could use these functions constantly in everyday life in mathematics lessons, including when calculating areas, volumes, or even in physical modeling.

In JavaScript, the exponential function is represented as Math.pow(), in the new ES7 standard, a new exponentiation operator was introduced - " * * ".

Exponentiation

To raise a number to the nth power, use the Math.pow() function, where the first argument is the number to be raised to the power, and the second argument is the exponent:

Math.pow(3,2) > 9
This notation means 3 squared, or 3 × 3, resulting in a result of 9. Another example could be given, of course:

Math.pow(5,3); > 125
That is, 5 cubed, or 5 × 5 × 5, equals 125.

ECMAScript 7 is the next version of JavaScript, in principle, we can use the new proposed exponentiation operator - * *, this form of writing can be more descriptive:

3 ** 2 > 9
At the moment, support for this operator is rather limited, so it is not recommended to use it.

The power function can come in handy in a variety of situations. A simple example, calculating the number of seconds in an hour: Math.pow(60,2).

Square and cube root

Math.sqrt() and Math.cbrt() are the opposite of Math.pow(). As we remember, the square root of a is the number that gives a when squared.

Math.sqrt(9) > 3
At the same time, the cube root of a is the number that gives a when cubed.

Math.cbrt(125) > 5
Math.cbrt() was introduced into the JavaScript specification very recently and is therefore only supported in modern browsers: Chrome 38+, Firefox and Opera 25+ and Safari 7.1+. You will notice that Internet Explorer is not on this list, however you will find a polyfill on MDN.

Examples

Of course, we can also use non-integer values ​​in one of these functions:

Math.pow(1.25, 2); > 1.5625 Math.cbrt(56.57) > 3.8387991760286138
Note that this works just as well when using negative argument values:

Math.pow(-5,2) > 25 Math.pow(10,-2) > 0.01
However, for square root this won't work:

Math.sqrt(-9) > NaN
From mathematical analysis, we know that the imaginary number is understood as the square roots of negative numbers. And that might lead us to another complex number technique, but that's another story.

You can use fractional values ​​in Math.pow() to find the square and cube roots of numbers. The square root uses an exponent of 0.5:

Math.pow(5, 0.5); // = Math.sqrt(5) = 5 ** (1/2) > 2.23606797749979
However, due to the vagaries of floating point, you can't exactly guess the correct result:

Math.pow(2.23606797749979.2) > 5.000000000000001
In such situations, you will have to resort to cutting off signs from the number or rounding to some value.

Some, inexplicably in JavaScript, confuse the Math.pow() function with Math.exp() , which is an exponential function for numbers in general. Note: in English, "exponent" is translated as "exponent", so this is more relevant to English speakers, although there are alternative names for the exponent, such as index, power.

Mathematical constants

Working with mathematics in JavaScript is made easier by a number of built-in constants. These constants are properties of the Math object. It is worth noting that the constants are written in upper case, not CamelCase notation.

Math.abs, parseInt, parseFloat

Working with numbers in JavaScript can be a lot more complicated than you think. The obtained values ​​do not always fall within the expected ranges, sometimes the result may not be what we expected at all.

Math.abs()

The Math.abs() method returns the absolute value of a number, which reminds us of the analogous mathematical modulo a function.

Let newVal = -57.64; Math.abs(newVal); > 57.64
Math.abs(0) always returns zero, but if we put a minus sign in front of the -Math.abs(NUM) function, we will always have a negative value.

Math.abs(0); > -0

parseInt()

We know that JavaScript understands that "15" is a string, not a number, and, for example, when parsing CSS properties using JavaScript, or getting some value from an unprepared array, our results can turn out to be unpredictable. We could get a string represented as "17px" as input, and this is not uncommon for us. The question is how to convert this string to actual value and use it in further calculations.

Syntax: parseInt(string, radix);

The parseInt function converts the first argument passed to it to a string type, interprets it, and returns an integer or NaN value. The result (if not NaN) is an integer and is the first argument (string) treated as a number in the specified number system (radix). For example, base 10 indicates conversion from decimal, 8 from octal, 16 from hexadecimal, and so on. If the base is greater than 10, then letters are used to denote numbers greater than 9. For example, hexadecimal numbers (base 16) use the letters A through F.

Consider an example of working with CSS properties, where, relatively speaking, we can get the following value:

Let elem = document.body; let centerPoint = window.getComputedStyle(elem).transformOrigin; > "454px 2087.19px"
We can separate values ​​by spaces:

Let centers = centerPoint.split(" "); > ["454px", "2087.19px"]
However, each element is still a string, we can get rid of this by using our function:

Let centerX = parseInt(centers, 10); > 454 let centerY = parseInt(centers, 10); > 2087
As you can see, as the second argument we specify the number system to which the number will be converted, this parameter is optional, but it is recommended to use it if you do not know which string will be input.

parseFloat()

From the example above, you may have noticed that parseInt discards the fractional part. In our case, parseFloat can work with floating point numbers. Again, this can be useful in CSS parsing and other tasks, especially when dealing with floating point percentages.

Syntax: parseFloat(string)

LetFP = "33.33333%"; console.log(parseFloat(FP)); > 33.33333
Note that there is no second argument in the parseFloat syntax.

We understand that parseInt() and parseFloat() are extremely useful functions, it's important to keep in mind that there are some errors here, so it's necessary to check the range of expected values ​​and ultimately parse the result to ensure that the values ​​obtained are correct.
Send anonymously

Now consider the floor method (in translation - gender), which works the opposite of the ceil method, i.e. he rounds a fractional number down.

As you can see, the floor method rounded the number 35.97 down to 35 . Even though 0.97 is greater than 0.5 (cm. ).

This lesson covered the methods of the Math object, allowing rounding of fractional decimal numbers.

Now you need to do your homework.

Your task is to write a function that takes two parameters.
1. An array consisting of numbers with fractions.
2. Rounding method "round" , "ceil" or "floor" .

At the output, the function should output the same array, but at the same time, all elements of the array should be rounded using the method of the Math object specified in the second parameter.

Source array:

varnumberArray = ;

At first, the solution to this task may seem almost identical to the solutions to the homework problems from the first three lessons of this topic. But not everything is so simple...

Decision #1 - Attention

According to the task the function must take two parameters- initial array and one of the methods: "round" , "ceil" or "floor" . Based on this, I tried to do so...

In this solution, we create a function with two parameters, and when we call it, we try to specify the original array and the NAME of one method as parameters of the function:
decimal (numberArray, round ) - in this case, round .

But we will not get the result, because DO NOT specify the NAME of a method as a function parameter.

Pay attention: it's no coincidence that in the problem statement the names of the methods "round" , "ceil" and "floor" enclosed in quotation marks.

decimal (numberArray, "round" ) - but such a notation will not be correct either!!!

Solution #2 - Correcting the previous solution

You can solve the problem by specifying one parameter for the function.

35 - Rounded element

13 - Rounded element

17 - Rounded element

79 - Rounded element

We managed to achieve the desired result here: the round method rounded all numbers by . But condition not met, since the function takes only one parameter.

Solution #3 - Function with two parameters

Here the problem is solved correctly. To do this, it was necessary to remember the theme of conditions in javascript and apply several conditions at the same time.

34.82 - original array element
35 - round up

12.9 - original array element
13 - round up

17.01 - the original element of the array
18 - round up

78.51 - original array element
79 - round up

it the right decision Homework. Here, two parameters are specified for the function according to the condition.

Try in the last line of this solution:
decimal (numberArray, "ceil" ) as the second parameter of the function, specify the names of other methods "round" and "floor" of the Math object.

Solution #4 - Function with two parameters + prompt method

I decided to optimize the previous solution a bit and added a prompt method that calls up a modal window containing a field for entering information.

Now, thanks to this, it will be possible to enter the name of one of the round , floor or ceil methods in the input field and get the corresponding result.

This is how the round , floor , or ceil methods of the Math object work, which round fractional numbers.

The Math.round() function returns the value of a number rounded to the nearest integer.

The source for this interactive example is stored in a GitHub repository. If you"d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Syntax

Math round(x)

Parameters

x A number.

return value

The value of the given number rounded to the nearest integer.

Description

If the fractional portion of the argument is greater than 0.5, the argument is rounded to the integer with the next higher absolute value. If it is less than 0.5, the argument is rounded to the integer with the lower absolute value. If the fractional portion is exactly 0.5, the argument is rounded to the next integer in the direction of +∞. Note that this differs from many languages" round() functions, which often round this case to the next integer away from zero , instead giving a different result in the case of negative numbers with a fractional part of exactly 0.5.

Because round() is a static method of Math , you always use it as Math.round() , rather than as a method of a Math object you created (Math has no constructor).

Examples

Math round(20.49); // 20 Math.round(20.5); // 21 Math.round(42); // 42 Math.round(-20.5); // -20 Math.round(-20.51); // -21

Demonstrative Implementation

Below is a snippet of code that is functionally equivelent to math.round except that the snippet of code below is slower than Math.round. The purpose of the snippet of code below is to demonstrate how Math.round works.

Function vanilla_round(x) ( var y = Math.abs(x) + 0.5; // so that less than 1/2 rounds down; greater rounds up return Math.floor(x+0.5) )

The modulus operator above gets the decimal part of x. Further, the above code snippet could be modified to round to a certain precision on a number:

Function round_to_precision(x, precision) ( var y = +x + (precision === undefined ? 0.5: precision/2); return y - (y % (precision === undefined ? 1: +precision)); )

Round_to_precision(11, 2); // outputs 12 round_to_precision(11, 3); // outputs 12 round_to_precision(11, 4); // outputs 12 round_to_precision(11, 5); // outputs 10 round_to_precision(11, 6); // outputs 12 round_to_precision(11, 7); // outputs 14 round_to_precision(11, 8); // outputs 8 round_to_precision(3.7, 0.5); // outputs 3.5 round_to_precision(3.75, 0.5); // outputs 4 round_to_precision(3.8, 0.5); // outputs 4

Specifications

Specification	Status	Comment
ECMAScript 1st Edition (ECMA-262)	standard	initial definition. Implemented in JavaScript 1.0.
ECMAScript 5.1 (ECMA-262)	standard
ECMAScript 2015 (6th Edition, ECMA-262) The definition of "Math.round" in that specification.	standard
ECMAScript Latest Draft (ECMA-262) The definition of "Math.round" in that specification.	Draft

Browser compatibility

The compatibility table in this page is generated from structured data. If you"d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

	Desktop						Mobile						server
	Chrome	edge	Firefox	Internet Explorer	Opera	safari	android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet	Node.js
round	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	IE Full support 3	Opera Full supportYes	Safari Full support Yes	WebView Android Full support 1	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support 1.0	nodejs Full support Yes