Hi everyone, and welcome to another barn-burning edition of Boring JavaScript! Today, we take on the parseFloat() method – which converts strings into floating point numbers.

Don’t like to read? Then check out our video.

Floating Down the River

parseFloat() is very easy to use – simply pass it a string, and it will convert that string into a JavaScript floating point number (IEEE). Let’s look at an example:

const stringNumber = "1234.45";
const number = parseFloat(stringNumber);
console.log(`Number by Default:  ${number} - type = ${typeof number}`);

/* output
1234.45 - type = number
*/

Simple enough, right? parseFloat() takes only one argument, and that is the string you wish to convert to a floating point variable.

In fact, if the argument is not a string, it will try to convert it over to a string before parsing. For example:

const number = 9876.54
const numberFromNumber = parseFloat(number);
console.log(`Number From Number: ${numberFromNumber} - type = ${typeof numberFromNumber}`);

/* output
9876.54 - type = number
*/

Although what we did was rather silly (number converted to string converted back to a number), it does show that the variable you pass will be converted over to a string before being converted into a floating point number.

The Far Side of the Moon

So if numbers are converted into strings before being converted into numbers, what about other data types? Let’s take a look:

Hexadecimal Strings

Remember from our parseInt() example that you could use the format “0x12” to force a base 16 calculation? What about parseFloat()?

const base16 = "0x1ae0";
console.log(`Base16: ${parseFloat(base16)}`);

/* output
Base16: 0
*/

It doesn’t work here. For parseFloat(), it sees the first non-numeric character and stops processing, producing the number 0.

Scientific Notation

How about for all you budding scientists out there?

const scientificNotation = "6.1234e7";
console.log(`Scientific Notation: ${parseFloat(scientificNotation)}`);

/* output
Scientific Notation: 61234000
*/

That works! parseFloat() recognizes scientific notation and parses it accordingly.

Strings

What if you have badly-formatted strings? For example, a string that has no numbers and a string that starts with numbers, but has other letters in it?

const badString = "Cat";
console.log(`Bad String:  ${parseFloat(badString)}`);

const badString2 = "1.2Cat";
console.log(`Bad String2: ${parseFloat(badString2)}`);

/* output
Bad String:  NaN
Bad String2: 1.2
*/

See what happened there? parseFloat() will parse the string until it finds a non-numeric character, then stop. In the first instance, there were no characters at the beginning of the string, so parseFloat() returned ‘NaN’. But in the second instance, there was a number, and therefore it returns 1.2.

BigInt

How about really big strings that represent really big ints?

const bigNumber = "12345678901234567890n";
console.log(`Big Number: Before = ${bigNumber}, After = ${parseFloat(bigNumber)}`);

/* output
Big Number: Before = 12345678901234567890n, After = 12345678901234567000
*/

Yes, works there, too. Although you might lose a some precision.

And the rest

What about other data types? I’ll group them all together – you’ll find out why:

console.log(`Boolean: ${parseFloat(true)}`);
console.log(`NaN: ${parseFloat(NaN)}`);
console.log(`null: ${parseFloat(null)}`);
console.log(`undefined: ${parseFloat(undefined)}`);
console.log(`Object: ${parseFloat({ cat: 'Fluffy' })}`);

/* output
Boolean: NaN
NaN: NaN
null: NaN
undefined: NaN
Object: NaN
*/

All the other data types will return ‘NaN’.

The Video

Here is a video on the subject:

Shameless Plug

You can find us everywhere!

Check out all our videos at: https://www.boringjavascript.com

Check out everything at: https://www.thevirtuoid.com

Facebook: https://www.facebook.com/TheVirtuoid

Twitter: https://twitter.com/TheVirtuoid

YouTube: https://www.youtube.com/channel/UCKZ7CV6fI7xlh7zIE9TWqgw

Categories: Boring JavaScript Javascript

Tagged as: #javascript #parsefloat

thevirtuoid

Web Tinkerer. No, not like Tinkerbell.

Creator of the game Virtuoid. Boring JavaScript. Visit us at thevirtuoid.com