2020 March 05

Floating Point Precision


If you're like me and don't really count on JavaScript being your calculator, this might be of help. One client needed me to simply add two products together displaying the total for a new feature to "add both to cart"... not so simple of a task. When it comes to floating point values, JavaScript isn't so great at math and to be honest it's not a fault on the language. Just as as quick example:

This is because of the IEEE Standard for Floating-Point Arithmetic. I ended up down this rabbit hole to better understand it, but ultimately I decided to work around it.

Quick Solution: Convert Floats Into Integers

So to break this down, we first needed these to be whole numbers and if we divide by 100 again. The first example we get will return with a decimal in the hundredths. However, what if there were zeros in place of .99? Any trailing zeros will not appear. This is fine until the end result for the user to see. This doesn't work completely because it needs to be set to the hundredths place. This is where toFixed comes in.

I used to be nervous about JavaScript handling totals for me, but this is decent enough for general use. If I had it my way, it's ideal if an API can provide this total for me without having to do this. In my experience I have noticed some APIs that do provide the price in whole number (Shopify's REST API is one example), which is perfect!

Intl.NumberFormat

But! There is a useful constructor that can do all of the formatting better than what I demonstrated.

So take the last example from above and disregard toFixed entirely. Not only does this help with decimal format, but also handles segmenting by commas and provides the correct currency symbol. It's also preferred if your client's site sells outside of the US as it can sync with localization. It also handles more than formatting for currency as well. I highly recommend using this, as it will save you many headaches.

Additional Resources

If you're wanting to see how IEEE-754 works, here are the following resources:

Copyright © 2021. Jake Wantulok