Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to convert a string to a floating point number in JavaScript?
In JavaScript, converting a string to a floating point number is a common task that can be accomplished through several methods. This article explores three effective approaches to achieve this conversion.
Using the parseFloat() Method
The parseFloat() function is the most direct way to convert a string to a floating point number. It parses a string and returns the first number found, including decimal values.
Syntax
parseFloat(string)
Note: If the first character cannot be converted to a number, parseFloat() returns NaN.
Example: Basic parseFloat() Usage
<!DOCTYPE html>
<html>
<head>
<title>parseFloat() Examples</title>
</head>
<body>
<script>
// Handles leading spaces
let a = parseFloat(" 400 ");
document.write("String with spaces: " + a + "<br>");
// Non-numeric first character returns NaN
let b = parseFloat(" Nikhilesh ");
document.write("Non-numeric string: " + b + "<br>");
</script>
</body>
</html>
String with spaces: 400 Non-numeric string: NaN
Example: Decimal Values
<!DOCTYPE html>
<html>
<head>
<title>parseFloat() with Decimals</title>
</head>
<body>
<script>
let decimal = parseFloat("183.1745");
document.write("Decimal conversion: " + decimal);
</script>
</body>
</html>
Decimal conversion: 183.1745
Example: Mixed String Content
<!DOCTYPE html>
<html>
<head>
<title>parseFloat() Mixed Content</title>
</head>
<body>
<script>
let a = parseFloat("Nikhil007");
document.write("Text first: " + a + "<br>");
let b = parseFloat("007Jamesbond");
document.write("Number first: " + b);
</script>
</body>
</html>
Text first: NaN Number first: 7
Using the parseInt() Method
The parseInt() function converts strings to integers, truncating any decimal portion. While not specifically for floating point conversion, it's useful when you only need the integer part.
Example: parseInt() vs parseFloat()
<!DOCTYPE html>
<html>
<head>
<title>parseInt() Examples</title>
</head>
<body>
<script>
document.write("parseInt() results:<br>");
document.write(parseInt(" 18 ") + "<br>");
document.write(parseInt("18.00") + "<br>");
document.write(parseInt("18.33") + "<br>");
document.write(parseInt("18 10 7") + "<br>");
document.write(parseInt("45 inches") + "<br>");
document.write(parseInt("she was 99") + "<br>");
</script>
</body>
</html>
parseInt() results: 18 18 18 18 45 NaN
Using Type Conversion (Unary Plus)
The unary plus operator (+) provides a quick way to convert strings to numbers, including floating point values.
Example: Unary Plus Conversion
<!DOCTYPE html>
<html>
<head>
<title>Unary Plus Conversion</title>
</head>
<body>
<script>
let a = +"123.45";
document.write("Unary plus: " + a + "<br>");
let b = +" 678.9 ";
document.write("With spaces: " + b + "<br>");
let c = +"invalid";
document.write("Invalid string: " + c);
</script>
</body>
</html>
Unary plus: 123.45 With spaces: 678.9 Invalid string: NaN
Comparison
| Method | Handles Decimals | Ignores Trailing Text | Best Use Case |
|---|---|---|---|
parseFloat() |
Yes | Yes | Converting strings with potential non-numeric content |
parseInt() |
No | Yes | When only integer portion is needed |
| Unary Plus (+) | Yes | No | Clean numeric strings, concise syntax |
Conclusion
For converting strings to floating point numbers, parseFloat() is the most reliable method, especially when dealing with mixed content. Use parseInt() for integers only, and the unary plus operator for clean numeric strings when you need a concise conversion.
2K+ Views
