const number = 80.6// Old Way
number < 0 ? Math.ceil(number) : Math.floor(number);
// 80// ✅ES6 Way
const es6 = Math.trunc(number);
// 80
Example
Math.trunc() simply truncates (cuts off) the dots and the digits to the right of it. No matter whether the argument is a positive or negative number.
Math.trunc(80.9); // 80
Math.trunc(80.8); // 80
Math.trunc(80.8); // 80
Math.trunc(80.6); // 80
Math.trunc(80.5); // 80
Math.trunc(80.4); // 80
Math.trunc(80.3); // 80
Math.trunc(80.2); // 80
Math.trunc(80.1); // 80Math.trunc(-80.1); // -80
Now let’s see some examples with non-number arguments:
Math.trunc('80.1'); // 80
Math.trunc('hello'); // NaN
Math.trunc(NaN); // NaN
Math.trunc(undefined); // NaN
Math.trunc(); // NaN
Number truncation using parseInt
You can get a similar result using parseInt
parseInt(80.1); // 80
parseInt(-80.1); // -80parseInt('80.1'); // 80
parseInt('hello'); // NaN
parseInt(undefined); // NaN
parseInt(); // NaN
Math.trunc() vs parseInt()
parseInt is mainly used for a string argument. So if you're dealing with numbers, it's way better to use Math.trunc().
If you’re curious, I wrote up a performance test comparing these two functions.
jsPerf: Math.trunc vs parseInt
The gotcha with parseInt
There’s a potential issue when using parseInt. When you pass in an argument that's not a string, in our case a number, it will first convert the value to a string using the toString() abstract operation. Most of the time, parseInt is fine. But let's look at an example where it might not be.
const number = 1000000000000000000000.5;const result = parseInt(number);console.log(result); // 1 <-- 😱
☝️So why did this happen?? That’s because our argument is not a string, so the first thing parseInt does is it will convert the argument into a string.
const number = 1000000000000000000000.5;const result = number.toString();console.log(result); // "1e+21"
So when it tried to grab the integer from 1e+21, it just knows to grab the 1 value. So, using parseInt definitely has its gotcha. Because of this edge case, you might want to consider using the Math functions 👍
Browser Support
Most modern browsers support Math.trunc(). EXCEPT, Internet Explorer. I know 😞 So if you need support for older browsers, use the old way 😕
Browser Support: Math.trunc
Community Input
Bitwise Operator Solutions
Double Bitwise NOT ~~console.log(~~80.6); // 80
Thanks: @Jorgert120
Bitwise OR |console.log(80.6 | 0); // 80
Thanks: @mac_experts
toFixed Solution
Frani 🍍: You also can use method .toFixed()
(80.645).toFixed() // “80”
This method returns a String but we can convert it again to number:
This method returns a String but we can convert it again to number:
Number((80.645).toFixed()) // 80
Could be a little messy but with this option, you can choose how many decimals do you want to.
Thanks: Frani 🍍


Resources
MDN Web Docs: Math.trunc
MDN Web Docs: parseInt
MDN Web Docs: Bitwise operators
JS Tip: Use parseInt for strings, NOT for numbers
2ality: parseInt doesn’t always correctly convert to integer
Share
Like this on Twitter
Like this on Instagram
Originally published at www.samanthaming.com


Thanks for reading ❤
Could be a little messy but with this option, you can choose how many decimals do you want to.
Thanks: Frani 🍍


Resources
MDN Web Docs: Math.trunc
MDN Web Docs: parseInt
MDN Web Docs: Bitwise operators
JS Tip: Use parseInt for strings, NOT for numbers
2ality: parseInt doesn’t always correctly convert to integer
Share
Like this on Twitter
Like this on Instagram
Originally published at www.samanthaming.com


Thanks for reading ❤
No comments:
Post a Comment