There are some ways to convert a number string, such as '123', to a real number in JavaScript. Let's do it!

Contents

Getting started

In JavaScript, a number can be represented in some formats:

  • Integer numbers:
    • Decimal: 123
    • Hexadecimal: 0x16fa
    • Binary: 0b1011
    • Octal: 0o123
  • Floating-point numbers, such as 1.2 or 1e3 (exponential notation)
  • Positive and negative infinity values: Infinity/+Infinity and -Infinity
  • Not-a-Number value: NaN

Note that in mathematics, a floating-point number can be represented in various bases, but you cannot declare it in JavaScript. For example:

0x16fa
// 5882

0x16fa.1
// Uncaught SyntaxError: Unexpected number

Method #1: Number(string)

The Number() function returns a number if the input string represents a correct number. Otherwise, it returns NaN value.

Number('123'); // 123
Number('0x16fa'); // 5882
Number('0b1011'); // 11
Number('0o123'); // 83

Number('1.2'); // 1.2
Number('1.0'); // 1
Number('1e3'); // 1000

Number('33a'); // NaN
Number('a33'); // NaN

Number('NaN'); // NaN
Number('Infinity'); // Infinity

Note:

  • Infinity is still a valid number value in JavaScript
  • This function parses number strings in various formats very well
  • The result can be an integer, a floating-point number, NaN or Infinity

Method #2: parseInt(string, radix)

The parseInt() function returns a decimal integer from the input number string in the specified radix (from 2 to 36). It tries to detect a valid substring from the very beginning of the input string that represents a number with the specified radix, then converts that substring only. If it cannot detect that substring, it returns NaN value.

parseInt('123', 10); // 123

parseInt('0x16fa', 16); // 5882
parseInt('16fa', 16); // 5882

parseInt('0b1011', 2); // 0
parseInt('1011', 2); // 11

parseInt('0o123', 8); // 0
parseInt('123', 8); // 83

parseInt('1.2', 10); // 1 (rounded down)
parseInt('1.0', 10); // 1
parseInt('1e3', 10); // 1

parseInt('33a', 10); // 33
parseInt('a33', 10); // NaN

parseInt('NaN', 10); // NaN
parseInt('Infinity', 10); // NaN

Note:

  • This function is more tolerant than the Number() function
  • Do not use the prefixes 0x, 0b, or 0o; specify the radix parameter instead
  • The radix parameter should be always specified
  • The result can be an integer or NaN
  • The Number.parseInt() method is the same as this function

Method #3: parseFloat(string)

Similar to the parseInt() function above, the parseFloat() function returns a decimal number if it can detect a valid substring. Otherwise, it returns NaN value.

parseFloat('123'); // 123

parseFloat('0x16fa'); // 0
parseFloat('16fa'); // 16

parseFloat('0b1011'); // 0
parseFloat('1011'); // 1011

parseFloat('0o123'); // 0
parseFloat('0123'); // 123

parseFloat('1.2'); // 1.2
parseFloat('1.0'); // 1
parseFloat('1e3'); // 1000

parseFloat('33a'); // 33
parseFloat('a33'); // NaN

parseFloat('NaN'); // NaN
parseFloat('Infinity'); // Infinity

Note:

  • This function is more tolerant than the Number() function
  • Do not work with the prefixes 0x, 0b, or 0o
  • The result can be an integer, a floating-point number, NaN, or Infinity
  • The Number.parseFloat() method is the same as this function

Conclusion

Since the parseInt() and parseFloat() functions are more tolerant than the Number() function, you should use the latter when you want to force the valid input.

There are several other ways to convert a string to a number, such as +'123' or 1*'123', but they make the code unclear so I do not want to mention them in the main part of this article.