How to Convert String to Number in JavaScript

Converting strings to numbers is a common task in JavaScript, particularly when dealing with user input, form data, or APIs that return numeric values as strings. This guide covers various methods to convert a string to a number in JavaScript, complete with explanations and examples.

let str = "42";
let num = Number(str);
console.log(num); // 42

To convert a string to a number in JavaScript, you can use the Number() function, parseInt(), parseFloat(), or the unary plus (+) operator:

In JavaScript, strings and numbers are distinct data types, but it’s common to need to convert between them. For example, user inputs are typically strings, but you might need to perform arithmetic operations on them. JavaScript provides several methods to convert strings to numbers, each suitable for different situations.

Using the Number() Function

The Number() function is a straightforward way to convert a string to a number. It works well for both integers and floating-point numbers.

Example 1: Conversion Using Number()

let str = "42";
let num = Number(str);
console.log(num); // 42

Explanation:

• Number(str): Converts the string "42" to the number 42.
• This method returns NaN (Not-a-Number) if the string cannot be converted to a number.

Using parseInt() for Integers

The parseInt() function parses a string and returns an integer. It’s useful when you only need the whole number part of a string.

Example 2: Conversion Using parseInt()

let str = "42.58";
let num = parseInt(str);
console.log(num); // 42

Explanation:

• parseInt(str): Converts the string "42.58" to the integer 42.
• You can also specify a radix (base) for the conversion, such as parseInt(str, 10) for base 10.

Using parseFloat() for Floating-Point Numbers

The parseFloat() function parses a string and returns a floating-point number. It is suitable when you need to retain the decimal part.

Example 3: Conversion Using parseFloat()

let str = "42.58";
let num = parseFloat(str);
console.log(num); // 42.58

Explanation:

• parseFloat(str): Converts the string "42.58" to the floating-point number 42.58.

Using the Unary Plus (+) Operator

The unary plus operator (+) is a shorthand way to convert a string to a number. It’s concise and works similarly to Number().

Example 4: Conversion Using Unary Plus

let str = "42";
let num = +str;
console.log(num); // 42

Explanation:

• +str: Converts the string "42" to the number 42.
• This method also returns NaN if the string cannot be converted to a number.

Handling Edge Cases

When converting strings to numbers, it’s important to consider edge cases, such as empty strings, non-numeric characters, and strings with whitespace.

console.log(Number(""));        // 0
console.log(Number("abc"));     // NaN
console.log(Number(" 42 "));    // 42
console.log(parseInt("42abc")); // 42

Explanation:

• Number(""): An empty string converts to 0.
• Number("abc"): A non-numeric string converts to NaN.
• Number(" 42 "): A string with whitespace converts to 42.
• parseInt("42abc"): Parses the numeric part and ignores the rest, converting to 42.

Conclusion

Converting strings to numbers in JavaScript is a fundamental task, and the method you choose depends on your specific needs. The Number() function and unary plus operator are versatile for general conversions, while parseInt() and parseFloat() are ideal when working with integers and floating-point numbers, respectively. Understanding these methods will help you handle numeric conversions effectively in your JavaScript applications.