Convert string to number in vanilla JavaScript Vanilla JS
Whenever you have a user-generated string that should be a number, you should always convert it to a number to avoid unexpected outcomes. Here are several ways to convert a string to a number in vanilla JavaScript.
parseInt()
parseInt() converts a string to an integer (whole number).parseInt('5'); returns the number value 5.
If you pass parseInt() a floating point number (number with a decimal place) it will parse the number before the decimal place and then stop processing when it reaches the decimal point. parseInt('5.6'); returns 5. This has the same effect as always rounding the number down to the integer (whole number) below.
You can use parseInt() on strings that contain non-numeric characters like '5px' or '5 biscuits' but only if they start with a number and it will only return the first number it finds. parseInt('5px'); returns 5.
parseInt() can't accurately parse numbers written in scientific notation. The number '2e5' represents the value 200,000 but parseInt('2e5'); returns 2 because it stops parsing as soon as it reaches a non-numerical character, in this case, 'e'.
parseInt() returns NaN for empty strings. NaN stands for 'Not a Number'.
parseInt('5.6'); //returns 5
parseInt('5px'); //returns 5
parseInt('5.6m'); //returns 5
parseInt('5 biscuits'); //returns 5
parseInt('I would like 5'); //returns NaN
parseInt('5 10'); //returns 5
parseInt('2e5'); //returns 2
parseInt(''); //returns NaN
parseFloat()
parseFloat() is similar to parseInt() in that it converts a string to a number value except parseFloat() can parse floating point numbers (numbers with a decimal place) as well as integers.
parseFloat('5'); returns 5 and parseFloat('5.6'); returns 5.6.
Similarly to parseInt(), parseFloat() can be used on strings that contain non-numeric characters like '5px' or '5 biscuits' if they start with a number and it will only return the first number it finds. The difference here is that parseFloat() can parse a floating point number from a string with non-numerical characters as well. parseFloat('5.6m'); returns 5.6.
Unlike parseInt(), parseFloat() can accurately parse numbers written in scientific notation. The number '2e5' represents the value 200,000 and parseFloat('2e5'); returns 200000.
parseFloat() returns NaN for empty strings. NaN stands for 'Not a Number'.
parseFloat('5.6'); //returns 5.6
parseFloat('5px'); //returns 5
parseFloat('5.6m'); //returns 5.6
parseFloat('5 biscuits'); //returns 5
parseFloat('I would like 5'); //returns NaN
parseFloat('5 10'); //returns 5
parseFloat('2e5'); //returns 200000
parseFloat(''); //returns NaN
Number()
Similarly to parseFloat(), Number() can parse both integers and floating point numbers from strings. Number('5'); returns 5 and Number('5.6'); returns 5.6.
Unlike parseInt() and parseFloat() however, Number() can't parse numbers from strings that contain non-numerical characters. Number('5px'); returns NaN.
Although Number() won't parse numbers from strings with non-numerical characters, if it recognises that a number is written in scientific notation, it will accurately parse that number. Number('2e5'); returns 200000.
Unlike parseInt() and parseFloat(), Number() returns 0 for empty strings.
Number('5.6'); //returns 5.6
Number('5px'); //returns NaN
Number('5.6m'); //returns NaN
Number('5 biscuits'); //returns NaN
Number('I would like 5'); //returns NaN
Number('5 10'); //returns NaN
Number('2e5'); //returns 200000
Number(''); //returns 0
Unary plus + operator
The unary plus + operator converts a string to a number when a plus + symbol is placed immediately before the string value with no space in between. +'5' returns the number 5.
The unary plus + operator can be used to convert both integer and floating point strings to number values. +'5.6' returns 5.6.
Similarly to Number(), the unary plus + operator returns NaN for any string that contains non-numerical characters unless it recognises a number value like scientific notiation. +'5px' returns NaN but +'2e5' returns 200000.
The unary plus + operator returns 0 for empty strings.
In all of these examples, the unary plus + operator returns exactly the same values as Number().
+'5.6' //returns 5.6
+'5px' //returns NaN
+'5.6m' //returns NaN
+'5 biscuits' //returns NaN
+'I would like 5' //returns NaN
+'5 10' //returns NaN
+'2e5' //returns 200000
+'' //returns 0
Multiply by 1
You can also convert a string to a number by multiplying it by 1. Multiplying a string by 1 also works with both integer strings and floating point strings and also returns NaN for any string with non-numerical characters unless it recognises a number like scientific notation and also returns 0 for empty strings.
In all of these examples multiplying a string by 1 returns the exact same values as both Number() and the unary plus + operator.
1*'5.6' //returns 5.6
1*'5px' //returns NaN
1*'5.6m' //returns NaN
1*'5 biscuits' //returns NaN
1*'I would like 5' //returns NaN
1*'5 10' //returns NaN
1*'2e5' //returns 200000
1*'' //returns 0
Math.floor()
You could also use Math.floor() to convert a string to a number value. Math.floor() always rounds a number down so regardless of whether the decimal is 5 or more, it will still round down. Math.floor('5.6') returns the number 5. This has the same effect as parseInt() because parseInt() just stops processing at the decimal point but Math.floor() is slower than parseInt().
Unlike parseInt(), Math.floor() won't parse a number from a string that contains non-numerical characters and will return NaN unless it recognises a number like scientific notation. Math.floor('5px') returns NaN and Math.floor('2e5') returns 200000.
Math.floor() returns 0 for empty strings.
Math.floor('5.6'); //returns 5
Math.floor('5px'); //returns NaN
Math.floor('5.6m'); //returns NaN
Math.floor('5 biscuits'); //returns NaN
Math.floor('I would like 5'); //returns NaN
Math.floor('5 10'); //returns NaN
Math.floor('2e5'); //returns 200000
Math.floor(''); //returns 0
Math.round()
If you want to convert a string to a number and round it up or down depending on the decimal value, you can use Math.round(). Math.round('5.6') returns the number value 6.
In the same way as Math.floor(), Math.round() won't parse a number from a string that contains non-numerical characters and will return NaN unless it recognises a number like scientific notation. Math.round('5px') returns NaN and Math.round('2e5') returns 200000.
Math.round() also returns 0 for empty strings.
Math.round('5.6'); //returns 6
Math.round('5px'); //returns NaN
Math.round('5.6m'); //returns NaN
Math.round('5 biscuits'); //returns NaN
Math.round('I would like 5'); //returns NaN
Math.round('5 10'); //returns NaN
Math.round('2e5'); //returns 200000
Math.round(''); //returns 0
Beware that if you are rounding negative numbers Math.round() might not behave as you expect because if the fraction portion is exactly 0.5, it rounds to the next integer towards +∞, instead of rounding to the next integer away from zero. This means that Math.round() rounds -2.5 is to -2, instead of rounding to -3 as you might expect. If the fraction portion is not 0.5, rounding negative numbers will behave as expected. -2.49 will be rounded to -2 and -2.51 will be rounded to -3.
If you want to round a value from a string that starts with a number and contains non-numerical characters like '5.6m', you would first need to use parseFloat() to get the number 5.6 from the string, and then use Math.round() to round the value you got back from parseFloat().
For example, Math.round(parseFloat('5.6m')); returns 6.
parseInt() vs parseFloat() vs Number() vs unary plus + operator vs multiplying by 1 vs Math.floor() vs Math.round() for converting strings to numbers in JavaScript
Here I compare what each method of converting a string to a number in JavaScript returns when passed the string values for an integer, a floating point number, a number followed by letters, scientific notation and an empty string.
A comparison table for different methods of converting strings to numbers in JavaScript.
| Method | Integer '5' |
Float '5.6' |
Number + characters '5px' |
Scientific notation '2e5' |
Empty string '' |
|---|---|---|---|---|---|
| parseInt() | 5 | 5 | 5 | 2 | NaN |
| parseFloat() | 5 | 5.6 | 5 | 200000 | NaN |
| Number() | 5 | 5.6 | NaN | 200000 | 0 |
| Unary plus + operator | 5 | 5.6 | NaN | 200000 | 0 |
| Multiplying by 1 | 5 | 5.6 | NaN | 200000 | 0 |
| Math.floor() | 5 | 5 | NaN | 200000 | 0 |
| Math.round() | 5 | 6 | NaN | 200000 | 0 |
Thanks for reading.
Ryan
Published on 11 Aug 2022