1. Introduction
This tutorial is going to cover how to convert string to number in JavaScript using different ways such as using parseInt() and parseFloat() global methods.
2. Convert String To Number In JavaScript
2.1. ParseInt()
One of the main solution is to use the global method parseInt(), which returns a primitive integer value. Let’s see its syntax first:
1 |
parseInt(str, radix); |
Parameters
- str: The value to parse.Leading whitespace in the string argument is ignored.
- radix: An integer between 2 and 36 that represents the radix (the base in mathematical numeral systems) of the above-mentioned string str. The default value is 10 which is the decimal numeral system commonly used by humans.
Return value
An integer number parsed from the given string. If the first character cannot be converted to a number, NaN is returned.
Next, let’s see some examples which we use the parseInt() to convert strings to integer in JavaScript:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
test('convert string to number in JavaScript', () => { expect(parseInt('15')).toEqual(15); expect(parseInt('15', 10)).toEqual(15); expect(parseInt('1111', 2)).toEqual(15); expect(parseInt('17', 8)).toEqual(15); expect(parseInt(' 0xF', 16)).toEqual(15); expect(isNaN(parseInt('Hel1lo'))).toBeTruthy(); expect(isNaN(parseInt('546', 2))).toBeTruthy(); }); |
2.2. ParseFloat()
Another option to convert strings to number in JavaScript would be to use the global parseFloat() method, which parses an argument and returns a floating point number. Let’s see it’s syntax first:
1 |
parseFloat(value) |
Parameters
- value: The value to parse.
Return value
A floating point number parsed from the given value. If the value cannot be converted to a number, NaN is returned.
And next, let’s see some examples which we use the parseFloat to convert strings to number in JavaScript:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
test('convert a string to number in JavaScript using parseFloat', () => { expect(parseFloat(4.56)).toEqual(4.56); expect(parseFloat('4.56')).toEqual(4.56); expect(parseFloat('456e-2')).toEqual(4.56); expect(parseFloat('0.0456E+2')).toEqual(4.56); expect(isNaN(parseFloat('FF2'))).toBeTruthy(); }); |
2.3. Number()
We can use the Number JavaScript object which is a wrapper object allowing us to work with numerical values, to convert string to number in JavaScript, for example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
test('convert a string to number in JavaScript using Number()', () => { expect(Number('156')).toEqual(156); expect(Number('15.6')).toEqual(15.6); expect(Number('0x11') ).toEqual(17); expect(Number('0b11')).toEqual(3); expect(Number('0o11')).toEqual(9); expect(isNaN(Number('Not A Number'))).toBeTruthy(); expect(isNaN(Number('100a'))).toBeTruthy(); }); |
2.4. Number.parseInt()
The Number object provides us a Number.parseInt() which has the same functionality as the global parseInt() function and of course, we can use this function to convert string to number in JavaScript. Firstly, let’s take a look at its syntax:
1 |
Number.parseInt(string,[ radix ]) |
The parameters and return value are the same with the global parseInt() method.
Next, let’s see some examples which we use the method to convert a string to an integer in JavaScript:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
test('convert a string to number in JavaScript using Number.parseInt()', () => { expect(Number.parseInt('15')).toEqual(15); expect(Number.parseInt('15', 10)).toEqual(15); expect(Number.parseInt('1111', 2)).toEqual(15); expect(Number.parseInt('17', 8)).toEqual(15); expect(Number.parseInt(' 0xF', 16)).toEqual(15); expect(isNaN(Number.parseInt('Hello'))).toBeTruthy(); expect(isNaN(Number.parseInt('546', 2))).toBeTruthy(); }); |
And if we run the tests, we will get us the same result as the global parseInt() method.
Note that the Number.parseInt() method is part of ECMAScript 6 (ES6, the new standard of
JavaScript). Older browsers that still in use, such as Internet Explorer 11 and below and Safari 7 and below, do
not support these features.
2.5. Number.parseFloat()
In similar to the Number.parseInt() method above, the Number.parseFloat() method works the same with the global parseFloat() method which parses a string argument and returns a floating point number. And of couse, we can use the method to covert string to float in JavaScript. Let’s take a look at its syntax:
1 |
Number.parseFloat(string) |
The parameters and return value are the same with the global parseFloat() method.
Next, we will get through some examples which we use the method to convert string to number in JavaScript:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
test('convert strings to number in JavaScript using Number.parseFloat()', () => { expect(Number.parseFloat(4.56)).toEqual(4.56); expect(Number.parseFloat('4.56')).toEqual(4.56); expect(Number.parseFloat('456e-2')).toEqual(4.56); expect(Number.parseFloat('0.0456E+2')).toEqual(4.56); expect(isNaN(Number.parseFloat('FF2'))).toBeTruthy(); }); |
And if we run the tests, we will get us the same result as the global parseFloat() method.
Note that the Number.parseFloat() method is also a part of ECMAScript 6, it can not work on the old web browser such as IE 11 and older.
3. Conclusions
The article has illustrated us how to convert string to number in JavaScript. We got through global methods parseInt(), parseFloat() and new methods of the object Number which introduced in ECMAScript 6 such as Number.parseInt(), Number.parseFloat() as well. Note that the methods of Number object work the same with global methods. However, they only work on new web browsers.
The source code presented in the tutorial is available on my Github project. You can easily check it out and run it with jest or mocha.
Here are other related articles for your references:
Check If A String Contains Substring In JavaScript
Some Open Source JavaScript Loggers
How To Empty An Array In JavaScript
Loop Through Object Properties In JavaScript