Converting a string to a number in JavaScript is a common operation when working with user input, form values, APIs, and data received as text. JavaScript provides several methods for converting numeric strings into numbers, including Number(), parseInt(), parseFloat(), and the unary + operator. Each method behaves differently depending on the type and format of the string. Understanding these methods helps developers choose the correct conversion technique and avoid unexpected results.

Table of Contents

---

What Does Converting a String to Number Mean?

Converting a string to a number means changing a text value that represents a number into an actual JavaScript number.
For example, "100" is a string, while 100 is a number. Although both display the same value, JavaScript treats them as different data types.

Example:

// JavaScript program to demonstrate string and number
let text = "100";
let number = Number(text);
console.log(text);
console.log(number);
console.log(typeof text);
console.log(typeof number);

Output:

100
100
string
number

Here, Number() converts the string "100" into the number 100.

Why Convert a String to Number?

Values received from HTML forms, input fields, and some external sources are commonly represented as strings. If a program needs to perform mathematical calculations with those values, they should be converted into numbers.

For example, adding two strings can produce string concatenation instead of numerical addition.

Example:

// JavaScript program to demonstrate why string conversion is required
let value1 = "10";
let value2 = "20";
console.log(value1 + value2);
console.log(Number(value1) + Number(value2));

Output:

1020
30

The first expression joins the two strings, while the second expression converts them into numbers before performing addition.

Using Number()

The Number() function is one of the simplest ways to convert a string into a number. It attempts to convert the complete string into a numeric value.

Example:

// JavaScript program to convert a string to a number using Number
let value = "250";
let number = Number(value);
console.log(number);
console.log(typeof number);

Output:

250
number

The string "250" is successfully converted into the number 250.

Number() can also convert decimal strings.

Example:

// JavaScript program to convert a decimal string using Number
let value = "45.75";
let number = Number(value);
console.log(number);
console.log(typeof number);

Output:

45.75
number

Using parseInt()

The parseInt() function converts a string into an integer. It reads the numeric part of a string and returns a whole number.

Example:

// JavaScript program to convert a string to an integer using parseInt
let value = "125";
let number = parseInt(value);
console.log(number);
console.log(typeof number);

Output:

125
number

If the string contains a decimal value, parseInt() returns only the integer portion.

Example:

// JavaScript program to demonstrate parseInt with a decimal string
let value = "25.75";
let number = parseInt(value);
console.log(number);

Output:

25

Therefore, parseInt() is useful when an integer is required.

Using parseFloat()

The parseFloat() function converts a string into a floating-point number. It preserves the decimal portion of the value.

Example:

// JavaScript program to convert a string to a decimal number using parseFloat
let value = "25.75";
let number = parseFloat(value);
console.log(number);
console.log(typeof number);

Output:

25.75
number

parseFloat() is useful when the input contains decimal values and the decimal portion needs to be retained.

Using the Unary + Operator

JavaScript also allows a string to be converted into a number by placing the unary + operator before it.

Example:

// JavaScript program to convert a string to a number using unary plus
let value = "500";
let number = +value;
console.log(number);
console.log(typeof number);

Output:

500
number

The unary + operator provides a short way to perform numeric conversion.

Converting Decimal Strings

A decimal string can be converted into a number using Number() or parseFloat().

Example:

// JavaScript program to convert a decimal string to a number
let value = "99.99";
let number1 = Number(value);
let number2 = parseFloat(value);
console.log(number1);
console.log(number2);

Output:

99.99
99.99

Both methods preserve the decimal portion in this example.

Converting Strings with Spaces

Number() can convert a numeric string that contains leading or trailing whitespace.

Example:

// JavaScript program to convert a string containing spaces to a number
let value = "   150   ";
let number = Number(value);
console.log(number);
console.log(typeof number);

Output:

150
number

JavaScript ignores the surrounding whitespace during this conversion.

Converting Invalid Strings

If a string does not represent a valid number, Number() returns NaN, which means Not-a-Number.

Example:

// JavaScript program to demonstrate conversion of an invalid string
let value = "Hello";
let number = Number(value);
console.log(number);
console.log(Number.isNaN(number));

Output:

NaN
true

Here, "Hello" cannot be converted into a valid number, so Number() returns NaN.

Difference Between Number(), parseInt(), and parseFloat()

The three methods are useful for different conversion requirements.

Method	Purpose	Example	Result
Number()	Converts the complete value into a number	Number("25.5")	25.5
parseInt()	Converts a value into an integer	parseInt("25.5")	25
parseFloat()	Converts a value into a floating-point number	parseFloat("25.5")	25.5

Using Number():

// JavaScript program to demonstrate Number
console.log(Number("25.5"));

Output:

25.5

Using parseInt():

// JavaScript program to demonstrate parseInt
console.log(parseInt("25.5"));

Output:

25

Using parseFloat():

// JavaScript program to demonstrate parseFloat
console.log(parseFloat("25.5"));

Output:

25.5

Checking the Converted Data Type

The typeof operator can be used to check whether the converted value is a number.

Example:

// JavaScript program to check the data type after conversion
let value = "75";
let number = Number(value);
console.log(number);
console.log(typeof number);

Output:

75
number

The typeof operator confirms that the converted value is a JavaScript number.

Complete Program to Convert String to Number

The following program demonstrates different ways of converting strings into numbers.

// JavaScript program to demonstrate different ways to convert strings to numbers
let integerString = "100";
let decimalString = "45.50";
let number1 = Number(integerString);
let number2 = parseInt(integerString);
let number3 = parseFloat(decimalString);
let number4 = +integerString;
console.log(number1);
console.log(number2);
console.log(number3);
console.log(number4);

Output:

100
100
45.5
100

Each method converts the string according to its own conversion rules.

Advantages of Converting Strings to Numbers

1. Accurate Calculations: Converting numeric strings into numbers allows JavaScript to perform mathematical calculations correctly.
2. Correct Data Handling: Number conversion ensures that values received as text are handled using the appropriate data type.
3. Useful for User Input: Form and input values can be converted into numbers before performing calculations.
4. Better Comparisons: Numeric conversion allows values to be compared as numbers instead of strings.
5. Flexible Conversion: JavaScript provides multiple methods, such as Number(), parseInt(), and parseFloat(), for different conversion requirements.

Common Beginner Mistakes

1. Using Strings Directly for Addition: Beginners may use "10" + "20" and expect the result to be 30, but JavaScript performs string concatenation and returns "1020".
2. Confusing parseInt() and parseFloat(): parseInt() removes the decimal portion, while parseFloat() preserves it.
3. Ignoring NaN: Beginners may not check whether a conversion failed and may continue using a NaN value in calculations.
4. Forgetting to Check the Data Type: A converted value should be checked with typeof when the data type is important.
5. Using the Wrong Conversion Method: Using parseInt() when a decimal value is required can result in loss of the decimal portion.

Conclusion

Converting a string to a number is an important operation in JavaScript when working with numeric values stored as text. The Number() function can convert a complete numeric string, while parseInt() is useful for integers and parseFloat() is useful for decimal values. The unary + operator provides another short method for numeric conversion. Choosing the appropriate method helps developers perform calculations correctly and handle user input more reliably.

FAQs

1. How do you convert a string to a number in JavaScript?

A string can be converted into a number using Number(), parseInt(), parseFloat(), or the unary + operator.

2. What does Number("100") return?

Number("100") returns the numeric value 100, which has the number data type.

3. What is the difference between parseInt() and parseFloat()?

parseInt() converts a value into an integer, while parseFloat() converts a value into a floating-point number and preserves the decimal portion.

4. What happens when an invalid string is passed to Number()?

Number() returns NaN when the complete string cannot be converted into a valid number.

5. Which method should be used to convert a decimal string into a number?

Number() or parseFloat() can be used when the decimal portion of a numeric string needs to be preserved.