JavaScript parseFloat: a simple way to convert strings into floating point numbers

javascriptifelseWhile browsing the web you may have come across terms like “JavaScript runtime error”. You may also have come across errors like “script too long” or “page could not be loaded”. Have you ever wondered what Javascript is all about? If you are interested in web programming, now’s a good time to learn JavaScript programming. It is very widely used to create interactive web pages. To make things easier for you we will walk you through some JavaScript basics and then move onto one of its most popular functions, parsefloat.

JavaScript – a short introduction

JavaScript is a scripting language. It is used to make web pages interactive. It is widely used to design web applications.

JavaScript was initially designed by Netscape to compete with Microsoft in the web world. JavaScript is influenced by C and is object oriented. In this regard, I would like to stress that Java and JavaScript are absolutely different and should never be confused with each other. Some people make this mistake as they sound similar but you should know better now. However, Java and JavaScript can interoperate well.

JavaScript is a client side language and can be embedded in HTML pages. Server side JavaScript also exists but that is out of scope of this article.

Popularity of JavaScript

JavaScript is a widely used language today as many browsers support it. Beginning with IE and Netscape Navigator, it is supported by Google Chrome and Firefox and even Safari.

Let’s now move on to programming in JavaScript and learn a few basics.

Programming with JavaScript

Firstly, let me assure you that JavaScript is easy to learn. The basic client side scripts can be learnt quite easily and most new programmers learn to do it pretty fast. We will learn one of the most basic functions of this language, namely the parsefloat.

Why we need parsefloat function?

Web pages are very interactive. To know your BMI you have to enter your height and weight. For online shopping you have to provide details like phone numbers, address, and your credit card number. In some cases, the entries have to be considered as numbers and used for mathematical calculations like in BMI and in other cases they have to be considered as texts like your phone number or your house number. How does the web page handle all this data?

Web pages are designed with HTML and have text boxes where users can enter their data. There is no concept of number boxes and so all the data that is entered, be it numbers or letters are considered as texts only.

It is the job of the code to identify text boxes with numbers and convert them from text to number format so that mathematical calculations can be performed on them.

The function parsefloat is applied in such cases in JavaScript.

The parsefloat converts strings into floating point numbers so that you can perform mathematical operations on them.

How to use parsefloat function?

To understand how parsefloat works you have to understand the concept of floating point numbers. Let’s do that first.

A lot of theory goes into how computer systems interpret numbers. The number 45 is a whole number or an integer as it doesn’t have any decimal part. However, real numbers can contain decimal part and the computer uses the concept of floating point to handle them.

Floating point number means that there is no fixed number of digits either before or after the decimal point. When represented as a number, approximation is used.

The syntax for parsefloat is parseFloat (). In the bracket you have to specify the string that has to be parsed. The function will return a floating point number.

Here is a code sample that used parseFloat ().

Here the web page prompts the user to enter a string in the text box and uses parseFloat to parse it and returns the result as a floating number.

var num1 = prompt(“enter a number”)
var answer = parseFloat(num1)
Alert(“the number you entered is:” + answer)

Now, let me explain the code.

var in JavaScript means a variable. It is used to store values. In this example, the variable name is num1 which stores the value you enter. So, if you type 25, it gets stored in num1 as string 25.

answer is another variable that stores the parsed value of num1. So, in the answer, 25 is stored as number 25.

Alert is a function that shows messages on the screen. In this case it will show, “the number you entered is 25”

If you enter 25.44, with parseFloat it will be shown as 25.44.

Why do you need parseFloat?

Suppose you want to add two numbers, and you type this code.

var num1 = prompt(“enter a number”)
var num2 = prompt(“enter a number”)
var answer = num1 +num2
Alert(“sum is:” + answer)

If the user enters 3 and 8, you will not get 11 as an answer but you will get 38. This is because the + sign is used to add numbers as well string texts together. So the system appends 3 to 8 and gives you 38.

The right code would be

var num1 = prompt(“enter a number”)
var num2 = prompt(“enter a number”)
var answer = parseFloat(num1) +parseFloat(num2)
Alert(“sum is:” + answer)

Now, you get 11 as an answer.

There is another function parseInt () in JavaScript that can be used also. But the scope of that function is limited as it cannot handle decimal points. It can only work with whole numbers. So, if your user enters 3.14 and 2.35 and you use parseInt(), the system would return 5. So, parseFloat () is more flexible and better equipped also.

How parseFloat() works?

The function parses the string for numerals, signs(+,-) or decimal points and even exponents. It stops when it encounters anything other than these. So, if the user enters 99cents, it will return 99. It can also handle leading and trialing spaces. However, if the user types cents99, the parseFloat() will return NaN whcih means it could not perform the operation.

If the user types 3.15e-2, it will return 3.15.

parseFloat () is a simple yet powerful function that can be used easily. I hope you are now clear about what it does and can successfully use it in your code. Like always, the best way to learn programming, is to do it. Do try out this hands on Javascript tutorial. It should help take you a few steps closer to your dream of becoming a certified web developer.