Convert a String to a Number in JavaScript

In this blog post, we will explore multiple approaches to converting a string to a number in JavaScript.

We will discuss the following methods:

1. Using the parseFloat() method
2. Using the Number() function
3. Using the parseInt() method
4. Using the unary plus (+) operator

1. Using the parseFloat() method

The parseFloat() method parses a value as a string and converts it into a floating point number. It returns NaN (Not-a-Number) if the first non-whitespace character cannot be converted to a number.

For example:

console.log(parseFloat("22"));        // 22
console.log(parseFloat("5.95"));      // 5.95
console.log(parseFloat("Hello"));     // NaN

Leading and trailing whitespace characters are ignored.

For example:

console.log(parseFloat(" 20 "));      // 20

The parseFloat() method only extracts the first floating-point number in the string.

For example:

console.log(parseFloat("15px"));      // 15
console.log(parseFloat("5 10 15"));   // 5
console.log(parseFloat("54 years"));  // 54
console.log(parseFloat("He is 54"));  // NaN

The parseFloat() method can extract and parse both integers (whole numbers) and floating-point numbers (numbers with decimal points) from a string.

2. Using the Number() function

The Number() function converts a value to a number. We can use this function to convert a string to a number. 

For example:

console.log(Number("22"));    // 22
console.log(Number("5.49"));  // 5.49

The Number() function tries to convert the entire string to a number. If the value cannot be converted into a valid number, it returns NaN (Not-a-Number). To avoid this, ensure the string consists only of numeric characters.

For example:

console.log(Number("15 px"));     // NaN
console.log(Number("5 10 15"));   // NaN
console.log(Number("54 years"));  // NaN

Leading and trailing whitespace characters are ignored.

For example:

console.log(Number(" 20 ")); // 20

The Number() function can extract and parse both integers (whole numbers) and floating-point numbers (numbers with decimal points) from a string.

The Number() function can parse binary, octal, and hexadecimal numbers but we cannot specify which number system to use for parsing. Due to this, it can unintentionally parse non-decimal strings as well, leading to unexpected results.

For example:

// binary number "0b" prefix
console.log(Number("0b1111"));  // 15

// Octal number "0o" prefix
console.log(Number("0o31"));  // 25

// Hexadecimal number "0x" prefix
console.log(Number("0x1F"));  // 31

3. Using the parseInt() method

The parseInt() method parses a string and returns an integer. It takes two arguments: the string to be parsed and an optional radix value that specifies the base of the numerical system to be used for parsing. If the radix parameter is not specified, 10 (decimal) is used by default. 

The parseInt() method returns NaN (Not-a-Number) if the first non-whitespace character cannot be converted to a number.

For example:

console.log(parseInt("22"));      // 22
console.log(parseInt("35", 10));  // 35
console.log(parseInt("hello"));   // NaN

To convert a string containing a binary, octal, or hexadecimal value, we need to pass the appropriate radix. E.g. 2 = binary, 8=octal, 10=decimal, 16=hexadecimal.

For example:

console.log(parseInt("1111", 2));  // 15
console.log(parseInt("31", 8));    // 25
console.log(parseInt("1F", 16));   // 31

If the string, starts begins with “0x” or “0X“, it is parsed as a hexadecimal number even if the radix is not specified.

For example:

console.log(parseInt("0x1F"));  // 31
console.log(parseInt("0X1F"));  // 31

The parseInt() method doesn’t handle decimal numbers. If the string contains a decimal number, it removes the fractional part and only returns the whole number component. 

For example:

console.log(parseInt("5.9"));  // 5

4. Using the Unary plus (+) operator 

In JavaScript, the unary plus (+) operator converts its operand into a number. If the operand cannot be converted into a number, it returns NaN.

For example:

console.log(+"22");    // 22
console.log(+"hello"); // NaN

Leading and trailing whitespace characters are ignored.

For example:

console.log(+" 22 ");  // 22

The unary plus operator tries to convert the entire string into a number. 

For example:

console.log(+"15px");     // NaN
console.log(+"5 10 15");  // NaN
console.log(+"54 years"); // NaN

Conclusion

In this blog post, we explore the four most common approaches to converting a string into a number in JavaScript. These methods include parseFloat(), Number(), parseInt(), and unary plus operator (+). Each method has its own unique advantages and use cases. 

Let me summarize the behavior of each method:

(1) The parseFloat() and Number() can extract and parse both integers (whole numbers) and floating-point numbers (numbers with decimal points) from a string. While the parseInt() method doesn’t handle decimal numbers. It removes the fractional part and only returns the whole number component. 

(2) The Number() and parseInt() can parse binary, octal, and hexadecimal numbers. You can specify which number system to use for parsing for the parseInt() method by specifying the radix parameter. But you cannot do so for the Number() function due to which it can unintentionally parse non-decimal strings as well, leading to unexpected results.

(3) The Number() function and unary plus operator tries to convert the entire string into a number. They return NaN if they cannot convert the entire string into a number.

(4) The parseFloat() method only tries to extract the first floating point number from the string. While the parseInt() method only tries to extract the first integer number from the string. They return NaN if they cannot convert the first non-whitespace character into a number.