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

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.