EDUCBA

EDUCBA

MENUMENU
  • Free Tutorials
  • Free Courses
  • Certification Courses
  • 600+ Courses All in One Bundle
  • Login

parseFloat in JavaScript

By Asapu HarikaAsapu Harika

Home » Software Development » Software Development Tutorials » JavaScript Tutorial » parseFloat in JavaScript

parseFloat-in-JavaScript

Introduction to parseFloat in JavaScript

parseFloat() is a global inbuilt function that accepts a string as an input and converts to floating-point numbers which means the floating-point number is parsed to a point where it encounters a character, a non-digit. Float is a data type for decimal numbers which are often used to calculate analog and continuous values as there calculation is difficult. Floating-point numbers can be a maximum of 3.40282347E+38 and a minimum of -3.40282347E+38. These floating-point numbers are always 64- bit. The floating-point represents a decimal integer with decimal points or fractions. Parsing means analyzing and converting a set of instructions into a format so that a runtime environment can run the program.

Syntax:

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

Number.parseFloat(value);

Or

parseFloat(value);

Accept a parameter which is a string and converts to a floating-point number. If the first character of the string cant be converted to a number, then the function returns NaN i.e. Not a Number. Typically returns floating-point number up to the point where a character appears which is not a digit.

Examples of parseFloat in JavaScript

Let us consider an example illustrating the above-mentioned theory,

Example #1

Code:

<!DOCTYPE html>
<html>
<body>
<script>
var n = parseFloat("  34829842  ");
document.write(n+ "<br>");
d = parseFloat("3.14") ;
document.write(d);
</script>
</body>
</html>

Output:

parseFloat in JavaScript 1-1

Here, parseFloat() ignores the spaces before and after the input string and only returns the floating-point number i.e 34829842.

Example #2

Using isNaN to check if the input string is a floating digit or character.

Code:

<!DOCTYPE html>
<html>
<body>
<script>
var x = parseFloat("3.45");
if (isNaN(x))
document.write("x is not a number" + "<br>");
else
document.write("x is a number" + "<br>");
var y = parseFloat("howareyou");
if (isNaN(y))
document.write("y is not a number" + "<br>");
else
document.write("y is a number" + "<br>");
</script>
</body>
</html>

Popular Course in this category
JavaScript Training Program (39 Courses, 23 Projects, 4 Quizzes)39 Online Courses | 23 Hands-on Projects | 225+ Hours | Verifiable Certificate of Completion | Lifetime Access | 4 Quizzes with Solutions
4.5 (6,122 ratings)
Course Price

View Course

Related Courses
Angular JS Training Program (9 Courses, 7 Projects)Vue JS Training (1 Courses, 3 Project)

Output:

isNaN

In Maths, 0/0 is undefined as a real number and is hence represented as NaN. As NaN doesn’t have a value, comparing it to itself returns TRUE. isNaN checks whether a value is NaN (Not – a –  Number), returns TRUE if the value is a number and equals to NaN else returns FALSE.

Example #3

Let us see the difference between parseInt() and parseFloat(), using parseInt(), every floating decimal number would be round up to its nearest value i.e if 2.34 would round to 2.

Code:

<!DOCTYPE html>
<html>
<body>
<script>
var x = parseInt("3.67");
var y = parseFloat("3.67");
document.write('Using parseInt("3.67") = ' + x + "<br>");
document.write('Using parseFloat("3.67") = ' + y + "<br>");
</script>
</body>
</html>

Output:

parseInt

Example #4

Extra-large numbers or extra small numbers can be written with exponential notation.

Code:

<!DOCTYPE html>
<html>
<body>
<script>
var x = parseFloat("432e-4");
var y = parseFloat("432e9");
document.write('Using parseFloat("432e-4") = ' + x + "<br>");
document.write('Using parseFloat("432e9") = ' + y + "<br>");
</script>
</body>
</html>

Output:

parseFloat in JavaScript 1-4

parseFloat() is not a method of any object. If parseFloat() encounters a character but the plus sign (+), minus (-), digits(0-9), decimal or exponent(e or E), parseFloat() returns value up to the character ignoring other invalid characters. Leading and trailing spaces for the values are ignored while parsing. Argument’s first character cant be converted to a digit and returns NaN, can return Infinity, can convert BigInt syntax to numbers as the trailing n character is discarded.

Example #5

Code:

<!DOCTYPE html>
<html>
<head>
<title>Exploring parseInt() and parseFloat()</title>
<script>
document.write(parseInt( "564.239" ) + "</br>" );
document.write(parseInt( "+564.239" ) + "</br>" );
document.write(parseInt( "-564.239" ) + "</br>" );
document.write(parseInt( "564FGl" ) + "</br>" );
document.write(parseInt( "FGl" ) + "</br>" );
document.write(parseInt( "4px 9px" ) + "</br>" );
document.write(parseInt( "(786)" ) + "</br>" );
document.write(parseInt( "0xF" ) + "</br>" );
document.write(parseInt( "056" ) + "</br>" );
document.write(parseInt( " 564 " ) + "</br>" );
document.write("</br>");
document.write(parseFloat( "564.239" ) + "</br>" );
document.write(parseFloat( "+564.239" ) + "</br>");
document.write(parseFloat( "-564.239" ) + "</br>");
document.write(parseFloat( "564FGl" ) + "</br>");
document.write(parseFloat( "FGl" ) + "</br>");
document.write(parseFloat( "4px 9px" ) + "</br>");
document.write(parseFloat( "(786)" ) + "</br>");
document.write(parseFloat( "0xF" ) + "</br>");
document.write(parseFloat( "056" ) + "</br>");
document.write(parseFloat( " 564 " ) + "</br>");
</script>
</head>
<body>
</body>
</html>

Output:

parseFloat in JavaScript 1-5

‘0x’ and ‘056’, as we are not treating as base 16 and base 8 respectively, the only difference is parseFloat() returns decimal for values like 564.239 whereas parseInt() returns 564.

Example #6

If there are two decimals, the second decimal is invalid and the parseFloat() method converts string up to that position. String 22.45.32 will be parsed to 22.45.

Code:

<!DOCTYPE html>
<html>
<head>
<script>
document.write(parseFloat( "22.45.32" ) + "</br>" );
</script>
</head>
<body>
</body>
</html>

Output:

parseFloat in JavaScript 1-6

Example #7

Using Number.parseFloat(strng_value).

Code:

<!DOCTYPE html>
<html>
<body>
<script>
var a="25";
var b="25.75"
var c="How are you";
var d="25How are you";
var e="25.75How are you"
document.writeln(Number.parseFloat(a)+"<br>");
document.writeln(Number.parseFloat(b)+"<br>");
document.writeln(Number.parseFloat(c)+"<br>");
document.writeln(Number.parseFloat(d)+"<br>");
document.writeln(Number.parseFloat(e));
</script>
</body>
</html>

Output:

parseFloat in JavaScript 1-7

Example #8

Before parsing and after parsing the value.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>area of a circle</title>
</head>
<script>
var a="10.67";
var b="23.51";
var c=a+b;
document.writeln("Before invoking parseFloat(): "+c+"<br>");
var c=Number.parseFloat(a)+Number.parseFloat(b);
document.writeln("After invoking parseFloat(): "+c);
</script>
</body>
</html>

Output:

parseFloat in JavaScript 1-8

Example #9

Let us see how to calculate simple interest using parseFloat.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Simple Interest</title>
</head>
<script type="text/javascript">
function simpleInterest()
{
var pa,rate,time;
pa=parseFloat(prompt("Enter Principle Amount"));
rate=parseFloat(prompt("Enter Rate Amount"));
time=parseFloat(prompt("Enter Time(year)"));
document.write(pa + "</br>");
document.write(rate + "</br>");
document.write(time + "</br>");
var si=(pa*rate*time)/100;
document.write("Simple Interest anually is: "+si);
}
</script>
<body>
<center>
<input type="button" value="Calculate Simple Interest" onclick="simpleInterest()" />
</center>
</body>
</html>

Output:

parseFloat in JavaScript 1-9

On clicking on the button:

parseFloat in JavaScript 1-10

We need to enter the principal amount, similarly have to enter the rate of interest and time.

Principal amount: 2313A.2
Rate: 2.A
Time: 1.2A

simple interest

Example #10

Calculation of circle radius.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>area of a circle</title>
</head>
<script type="text/javascript">
function area()
{
var radius;
radius=parseFloat(prompt("Enter radius"));
document.write(radius + "</br>");
var area = 3.14 * radius * radius;
document.write("Area of circle is is: "+area);
}
</script>
<body>
<center>
<input type="button" value="Calculate Area" onclick="area()" />
</center>
</body>
</html>

Output:

Calculate Area

Radius: 3DF.4A

parseFloat in JavaScript 1-13

Conclusion

Finally, we can conclude by saying that parsing these float digits can be helpful for complex calculations, as even though the user enters any character, parseFloat restricts only numbers and takes only the number as an input, which is parsing and returns floating value. This javascript function is not vigorous as parseInt() function as it parses the incoming string values to floating-point numbers instead of decimal but can only work with base 10 decimal values, not octal or hexadecimal.

Recommended Articles

This is a guide to parseFloat in JavaScript. Here we discuss the basic concept along with top 10 simple examples with code implementation and output. You may also look at the following articles to learn more –

  1. JavaScript Get Array Length
  2. JavaScript Merge Arrays
  3. JavaScript parseInt
  4. JavaScript Custom Events

JavaScript Training Program (39 Courses, 23 Projects)

39 Online Courses

23 Hands-on Projects

225+ Hours

Verifiable Certificate of Completion

Lifetime Access

4 Quizzes with Solutions

Learn More

0 Shares
Share
Tweet
Share
Primary Sidebar
JavaScript Tutorial
  • Advanced
    • Constructor in JavaScript
    • Inheritance in JavaScript
    • Polymorphism in JavaScript
    • JavaScript Static Method
    • Navigator in JavaScript
    • Abstract Classes in JavaScript
    • keyword in JavaScript
    • Overriding in JavaScript
    • JavaScript Clear Console
    • JavaScript References
    • JavaScript list
    • JavaScript Grid
    • JavaScript innerText
    • Cookies in JavaScript
    • Delete Cookie in JS
    • Encapsulation in JavaScript
    • JavaScript Parent Node
    • JavaScript Parent
    • Javascript Remove Element
    • Errors in JavaScript
    • Forms in JavaScript
    • JavaScript Validator
    • JavaScript Form Validation
    • Email Validation in JavaScript
    • Hamburger Menu JavaScript
    • JavaScript Date Formats
    • JavaScript Number Format
    • JavaScript Debugger
    • JavaScript Stack
    • Queue in JavaScript
    • parseFloat in JavaScript
    • Javascript innerHTML
    • JavaScript setInterval
    • JavaScript Popup Box
    • JavaScript Message Box
    • Lightbox in JavaScript
    • Javascript Design Patterns
    • addEventListener JavaScript
    • Timer in JavaScript
    • JavaScript setTimeout
    • JavaScript clearTimeout()
    • JavaScript String Format
    • JavaScript Scroll to Top
    • JavaScript Function Declaration
    • JavaScript Function Arguments
    • Javascript Strict Mode
    • File Handling in JavaScript
    • JavaScript parseInt
    • JavaScript prompt
    • JavaScript Set Class
    • JavaScript Try Catch
    • Javascript Throw Exception
    • Finally in JavaScript
    • JavaScript Get Element by Class
    • JavaScript Obfuscator
    • Disable JavaScript
    • SetAttribute JavaScript
    • JavaScript Cursor
    • LinkedList in JavaScript
    • JavaScript WeakMap
    • JavaScript DOM
    • JavaScript defer
    • JavaScript Promise
    • Pagination in JavaScript
    • JavaScript Refresh Page
    • JSON.stringify JavaScript
    • JavaScript IIFE
    • JavaScript Fetch API
    • JavaScript Auto Complete
    • JavaScript Copy to Clipboard
    • JavaScript querySelector
    • JavaScript Graph
  • Basic
    • Introduction To JavaScript
    • What is JavaScript
    • What Javascript Can Do
    • Uses of JavaScript
    • How JavaScript Works
    • Is Javascript Case Sensitive
    • Is Javascript Object Oriented
    • Features of JavaScript
    • Careers in JavaScript
    • How to Install JavaScript
    • Best Javascript Frameworks
    • JavaScript MVC Frameworks
    • JavaScript Tools
    • What is JSON
    • What is Redux
    • What is ES6
    • Uses of React JS
    • How Analytics.JS Works
    • JavaScript Compilers
    • Java and JavaScript
    • JavaScript Literals
    • Variables in JavaScript
    • JavaScript Global Variable
    • JavaScript Keywords
    • String in JavaScript
    • Pointers in JavaScript
    • Primitive Data Types in JavaScript
    • JavaScript console log
    • Object in JavaScript
    • JavaScript Enum
    • Arithmetic in JavaScript
    • Assignment Operator in JavaScript
    • JavaScript Modules
    • Cheat Sheet JavaScript
    • NPM Alternatives
  • Objects
    • JavaScript Objects
    • JavaScript History Object
    • JavaScript Object Notation
    • JavaScript Map Object
    • JavaScript Date Object
    • JavaScript Window Object
    • JavaScript Object Constructors
    • JavaScript Clone Object
    • JavaScript Object.assign()
    • JavaScript object.is()
    • JavaScript Object to JSON
  • Operators
    • Arithmetic Operators in JavaScript
    • JavaScript Assignment Operators
    • Logical Operators in JavaScript
    • Comparison Operators in JavaScript
    • Bitwise Operators in JavaScript
    • Ternary Operator JavaScript
    • Boolean Operators in JavaScript
    • JavaScript?Modulo
    • JavaScript Boolean()
    • Unary Operators in JavaScript
    • JavaScript Number
    • JavaScript Floating
    • JS Operator Precedence
  • Control statements
    • Control Statement in JavaScript
    • Conditional Statements in JavaScript
    • Break Statement in JavaScript
    • Continue in JavaScript
    • Switch Statement in JavaScript
    • Case Statement in JavaScript
    • JavaScript if Statement
    • Nested if in JavaScript
    • JavaScript elseIf
  • Loops
    • For Loop in JavaScript
    • While Loop in JavaScript
    • Do While Loop in JavaScript
    • Nested Loop in JavaScript
  • Array
    • Arrays in JavaScript
    • 2D Arrays in JavaScript
    • Multi-Dimensional Array in JavaScript
    • Associative Array in JavaScript
    • JavaScript Declare Array
    • Arrays Methods in JavaScript
    • JavaScript Loop Array
    • String Array in JavaScript
    • JavaScript Get Array Length
    • JavaScript Merge Arrays
    • JavaScript Array Sort
    • JavaScript Array Push
    • JavaScript Iterate Array
    • JavaScript Empty Array
    • JavaScript Array Concat
    • Dynamic Array in JavaScript
    • JavaScript subarray()
    • JavaScript Array Filter
    • JavaScript Nested Array
    • JavaScript Flatten Array
    • JavaScript Array map()
    • JavaScript Array includes()
    • JavaScript Array Contain
    • JavaScript Array Slice
    • JavaScript Copy Array
    • Javascript Sum Array
    • JavaScript reverse Array
    • JSON Parse Array
  • Sorting
    • Sorting Algorithms in JavaScript
    • Insertion Sort in JavaScript
    • Merge Sort in JavaScript
    • Quick Sort in JavaScript
    • Bubble Sort in JavaScript
    • pop() in JavaScript
    • push() in JavaScript
    • Sort string in JavaScript
  • Functions
    • JavaScript String Functions
    • JavaScript String Length
    • JavaScript split String
    • JavaScript Math Functions
    • Recursive Function in JavaScript
    • Regular Expressions in JavaScript
    • JavaScript Arrow Function
    • JavaScript Date Function
    • Match Function in Javascript
    • Replace Function in JavaScript
    • JavaScript Call Function
    • JavaScript Pass By Value
    • split() Function in JavaScript
    • reduce() Function JavaScript
    • JavaScript String replace
    • JavaScript Compare Strings
    • JavaScript Sleep
    • JavaScript toLowercase()
    • JavaScript String to Float
    • JavaScript String to Number
    • JavaScript String to int
    • JavaScript Object to String
    • JavaScript Convert to JSON
    • JavaScript Append
    • Javascript Array to String
    • Javascript Nested Functions
    • Set in JavaScript
    • Vectors in JavaScript
    • Javascript Anonymous Function
    • sign() in JavaScript
    • isNaN() JavaScript
    • Slice() Method in JavaScript
    • Javascript void
    • endsWith() in JavaScript
    • trim() Function in JavaScript
    • JavaScript typeof
    • JavaScript indexOf()
    • JavaScript encodeURI()
    • JavaScript Random
    • Ceil() in JavaScript
    • JavaScript tofixed
    • JavaScript hash()
    • JavaScript MD5
    • JavaScript search
    • JavaScript z-index
    • JavaScript Absolute Value
    • JavaScript Closure
    • Javascript Prototype
    • JavaScript Date parse
    • JavaScript DatePicker
    • JavaScript Parse String
    • JavaScript undefined
    • JavaScript FileReader
    • JavaScript Style visibility
    • JavaScript sleep Function
    • JavaScript forEach()
    • JavaScript keys()
    • JavaScript keycodes
    • JavaScript find() 
    • JavaScript values()
    • JavaScript Counter
    • JavaScript Countdown
    • JavaScript instanceof
    • JavaScript Delay
    • JavaScript Default Value
    • JavaScript concat String
    • JavaScript Document Object Model
    • Unshift JavaScript
    • JavaScript Callback Function
    • JavaScript hasOwnProperty()
    • JavaScript UUID
    • JSON Parser
    • JSON Array of Strings
    • Sublime Pretty JSON
    • JavaScript JSON to string
    • JavaScript Uppercase
    • JavaScript Namespace
    • JavaScript Range
    • JavaScript JSON
    • JavaScript exec()
    • JavaScript test()
    • JavaScript Self Invoking Functions
    • JSON Stringify Pretty
    • JavaScript findIndex()
    • JavaScript entries()
    • JavaScript join()
    • JavaScript lastIndexOf()
    • JavaScript every()
    • JavaScript getElementById()
    • JavaScript getElementsByName()
    • JavaScript getElementsByTagName()
    • JavaScript getElementsByClassName()
    • JavaScript Animation
    • JavaScript Minify
  • Events
    • JavaScript Events
    • JavaScript Event Handler
    • JavaScript Keyboard Events
    • JavaScript Mouse Events
    • JavaScript mousemove
    • JavaScript mousedown
    • JavaScript onchange
    • JavaScript onmouseout
    • JavaScript Onkeydown
    • JavaScript onsubmit
    • JavaScript Form Events
    • JavaScript Window Events
    • JavaScript Custom Events
    • JavaScript Alert
    • JavaScript Confirm
    • JavaScript onclick Alert
    • JavaScript Apply
    • JavaScript onblur
    • JavaScript onkeyup
    • JavaScript onfocus
  • Programs
    • Patterns in JavaScript
    • Reverse in JavaScript
    • Palindrome in JavaScript
    • Factorial Program in JavaScript
    • Fibonacci Series In JavaScript
    • Square Root in JavaScript
    • Prime Number in JavaScript
    • Armstrong Number in JavaScript
    • Random Number Generator in JavaScript
    • Reverse String in JavaScript
    • JavaScript Random String
    • Functional Programming in JavaScript
  • Interview Questions
    • Javascript Interview Questions
    • JSON Interview Questions
    • JS Interview Questions

Related Courses

JavaScript Certification Training

Angular JS Certification Training

Vue JS Training

Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Corporate Training
  • Certificate from Top Institutions
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions
  • Privacy Policy
  •  
Apps
  • iPhone & iPad
  • Android
Resources
  • Free Courses
  • Java Tutorials
  • Python Tutorials
  • All Tutorials
Certification Courses
  • All Courses
  • Software Development Course - All in One Bundle
  • Become a Python Developer
  • Java Course
  • Become a Selenium Automation Tester
  • Become an IoT Developer
  • ASP.NET Course
  • VB.NET Course
  • PHP Course

© 2020 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

EDUCBA Login

Forgot Password?

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

*Please provide your correct email id. Login details for this Free course will be emailed to you
Book Your One Instructor : One Learner Free Class

Let’s Get Started

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

*Please provide your correct email id. Login details for this Free course will be emailed to you

Special Offer - JavaScript Training Program (39 Courses, 23 Projects) Learn More