In terms of functions, JavaScript is a flexible programming language. For instance, using the parseFloat() function, you can parse an argument and return the floating number. If you have no prior experience with parsing, this command might be confusing.

Introduction

The most common use is function parsing. The return you get with this function is the floating point number, as you can guess by its name. Syntax-wise, this function has the following look:

parseFloat(string)

As you can see, we include a string into the brackets, which is a value to parse. Please note that if a selected argument is not a string, it is converted to one using the toString abstract operation.

As for the return value, a floating number point can be seen in an output parsed from the specified string. Alternatively, if the argument you include cannot be converted to a number, NaN will be shown. Let’s take a look at how this function works:

console.log(parseFloat('10')); // Expected output: 10

In this case, we use the brackets of the parseFloat() to include a string with the number 10. Even though the number we use is included in a string, this command parses it to give you an expected output. Let’s move on and review some more practical examples of this function.

Returning a floating point number from a string

One of the most straightforward use cases of the parseFloat() function is to parse a string, which already contains a floating point number. Take a look at the following example:

console.log(Number.parseFloat('25.678')); // Expected output: 25.678

As you see, the expected output of the Number is 25.678, which exactly matches the number located within a string. But what if we try using more complex numbers, which are also located within a string? Here is the most common example:

console.log(Number.parseFloat('314e-2')); // Expected output: 3.14

In this instance, we manipulate the pi number to get the simplified output from the specified string.

Let’s make things a bit more complicated and try to parse a string that contains an email address: [email protected]. See how it looks in a code snippet, as follows:

console.log(parseFloat("[email protected]")); // Expected output: 2022

In this case, the parseFloat() function parses an entire string and returns the only numbers it can find within a string, which is 2022. Please note that if you try this function with another email address, which also contains numbers, only these numbers will be shown in the output.

Including numbers into an argument

parseFloat() is great in parsing an entire string and locating the numbers. But what if you have a few numbers that are not separated anyhow? Take a look:

console.log(parseFloat("18 2 2022")); // Expected output: 18

When it comes to this example, the parseFloat() function parses through the entire string and returns only the first number. Why is it happening? The main reason behind this code behavior is that the function can work only with the first number it sees within the string.

And what if you separate these numbers within a function by commas?

console.log(parseFloat("18, 2, 2022")); // Expected output: 18

The output you get still equals 18, proving that the parseFloat() function has a unique functionality when working with a few numbers within an argument.

Returning NaN

While the parseFloat() function can be successfully used for emails and floating numbers, you might wonder how it returns NaN. Let’s review a few cases one by one to understand this code behavior better:

console.log(parseFloat("xyz 1")); // Expected output: NaN

In this instance, we get NaN as an output because the string starts with letters, which cannot be parsed. Although there is technically a number in the brackets, this function cannot identify it independently. Let’s consider one more example:

console.log(parseFloat("This is a string in JavaScript")); // Expected output: NaN

In this case, we include a standalone string containing a sentence, which excludes any floating point numbers. That means you won’t be able to get any other output than NaN when you exclude numbers from a string. Let’s review one more example when you don’t get any meaningful results using the parseFloat() function:

console.log(parseFloat('True')); // Expected output: NaN

We also include a word into a string, which reminds us of a Boolean function. Once again, because the parseFloat() function cannot identify any numbers within it, you’ll always get NaN.

Summary

All in all, the parseFloat() function in JavaScript is a great way to parse through a string and extract the floating point number from a specified function. Don’t forget that its use is a bit more nuanced when you have a few numbers in a row. The same applies to the work with strings that don’t contain any numbers at all.

Test yourself

  • Task 1. Use the parseFloat() function to parse the following string: (‘78.464’) and log output to a console.

Solution:

console.log(parseFloat('78.464')); // Expected output: 78.464

  • Task 2. Use the parseFloat() function to parse the following string containing an email address and try to extract a floating point number from it: (“[email protected]”).

Solution:

console.log(parseFloat("[email protected]")); // Expected output: 2002

  • Task 3. Use the parseFloat() function to parse the following string containing only a text message and 777 number value at the end, separated by a comma (“This is a sample message, 777”).

Solution:

console.log(parseFloat("This is a sample message, 777")); // Expected output: NaN