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 value to a number in JavaScript?
JavaScript provides several methods to convert values to numbers. Each method handles different types of input and has specific use cases. Let's explore the four main approaches: Number(), parseInt(), parseFloat(), and the unary operator (+).
Using Number() Method
The Number() method converts any value to a number. It's the most comprehensive conversion method and handles various data types.
<!DOCTYPE html>
<html>
<head>
<title>Convert value to number using Number()</title>
</head>
<body>
<h3>Number() Method Examples</h3>
<div id="numberResults"></div>
<script>
let a = Number("100");
let b = Number("100.234");
let c = Number(true);
let d = Number("true");
let e = Number(new Date());
let f = Number([1.2]);
document.getElementById('numberResults').innerHTML =
`Number("100") = ${a}<br/>
Number("100.234") = ${b}<br/>
Number(true) = ${c}<br/>
Number("true") = ${d}<br/>
Number(new Date()) = ${e}<br/>
Number([1.2]) = ${f}`;
</script>
</body>
</html>
Number("100") = 100
Number("100.234") = 100.234
Number(true) = 1
Number("true") = NaN
Number(new Date()) = 1703097600000
Number([1.2]) = 1.2
Using parseInt() Method
The parseInt() method parses a string and returns an integer. It stops parsing when it encounters a non-numeric character.
<!DOCTYPE html>
<html>
<head>
<title>Convert value to number using parseInt()</title>
</head>
<body>
<h3>parseInt() Method Examples</h3>
<div id="parseIntResults"></div>
<script>
let a = parseInt("100");
let b = parseInt("100.234");
let c = parseInt("123abc");
let d = parseInt(true);
let e = parseInt("abc123");
document.getElementById('parseIntResults').innerHTML =
`parseInt("100") = ${a}<br/>
parseInt("100.234") = ${b}<br/>
parseInt("123abc") = ${c}<br/>
parseInt(true) = ${d}<br/>
parseInt("abc123") = ${e}`;
</script>
</body>
</html>
parseInt("100") = 100
parseInt("100.234") = 100
parseInt("123abc") = 123
parseInt(true) = NaN
parseInt("abc123") = NaN
Using parseFloat() Method
The parseFloat() method parses a string and returns a floating-point number, preserving decimal values.
<!DOCTYPE html>
<html>
<head>
<title>Convert value to number using parseFloat()</title>
</head>
<body>
<h3>parseFloat() Method Examples</h3>
<div id="parseFloatResults"></div>
<script>
let a = parseFloat("100");
let b = parseFloat("100.234");
let c = parseFloat("3.14abc");
let d = parseFloat(true);
let e = parseFloat([1.2]);
document.getElementById('parseFloatResults').innerHTML =
`parseFloat("100") = ${a}<br/>
parseFloat("100.234") = ${b}<br/>
parseFloat("3.14abc") = ${c}<br/>
parseFloat(true) = ${d}<br/>
parseFloat([1.2]) = ${e}`;
</script>
</body>
</html>
parseFloat("100") = 100
parseFloat("100.234") = 100.234
parseFloat("3.14abc") = 3.14
parseFloat(true) = NaN
parseFloat([1.2]) = 1.2
Using Unary Operator (+)
The unary plus operator (+) is a quick way to convert values to numbers. It works similarly to Number() but with shorter syntax.
<!DOCTYPE html>
<html>
<head>
<title>Convert value to number using unary operator</title>
</head>
<body>
<h3>Unary Operator (+) Examples</h3>
<div id="unaryResults"></div>
<script>
let a = +"100";
let b = +"-100.234";
let c = +true;
let d = +"abc";
let e = +[1.2];
document.getElementById('unaryResults').innerHTML =
`+"100" = ${a}<br/>
+"-100.234" = ${b}<br/>
+true = ${c}<br/>
+"abc" = ${d}<br/>
+[1.2] = ${e}`;
</script>
</body>
</html>
+"100" = 100 +"-100.234" = -100.234 +true = 1 +"abc" = NaN +[1.2] = 1.2
Comparison of Methods
| Method | Returns | Handles Decimals | Best Use Case |
|---|---|---|---|
Number() |
Number or NaN | Yes | Complete conversion |
parseInt() |
Integer or NaN | No (truncates) | String to integer |
parseFloat() |
Float or NaN | Yes | String to decimal |
Unary +
|
Number or NaN | Yes | Quick conversion |
Conclusion
Use Number() for general conversions, parseInt() for integers from strings, parseFloat() for decimal numbers, and the unary operator (+) for quick conversions. Each method handles edge cases differently, so choose based on your specific needs.
4K+ Views
