String to number conversion in JavaScript
In this post, I am sharing several different ways of converting a string to number in JavaScript.
The parseInt function parses a string argument and returns an integer of a specified base (radix)
If the base (radix) argument is not specified, it is taken out of the context, i.e., string argument:
- the base is 16 (hexadecimal) if the input starts with
0x
or0X
- the base is 8 (octal) or 10 (decimal) if the input starts with
0
(zero). Note that this behavior is implementation-dependent and may not be consistent across all browsers. For that reason, it is always recommended to specify base (radix). - the base is 10 (decimal) if the input begins with any other value.
console.info(parseInt('0xFF')) // value 255 - base 16
console.info(parseInt('10')) // value 10 - base 10
console.info(parseInt('10', 16)) // value 16 - base 16
console.info(parseInt('10', 2)) // value 2 - base 2
console.info(parseInt('08')) // value 8 - base 10
console.info(parseInt('08', 10)) // value 8 - base 10
console.info(parseInt('08', 8)) // value 0! Why?
// digit 8 is invalid in base 8
console.info(parseInt('011')) // value 11 - base 10
console.info(parseInt('011', 8)) // value 9 - base 8
The parseFloat function parses a string argument and returns a floating point number. Note that unlike parseInt, parseFloat does not take second argument base/radix.
console.info(parseFloat('234.332')) // 234.332
console.info(parseFloat('92')) // 92
Following parsing returns 0
as this is the only recognized character.
console.info(parseFloat('0xFF')) // 0
The statement below returns NaN
(Not a Number) as none of the characters (FF
) is recognized by the parserFloat function.
console.info(parseFloat('FF')) // NaN
Unary plus converts a string into a number if the string is already in the form of an integer e.g.
var x1 = +'10'
console.info(x1, typeof x1) // 10 'number'
var x2 = 1 + +'10'
console.info(x2, typeof x2) // 11 'number'
var a = '120'
var b = +a
console.info(a, typeof a) // 120 string
console.info(b, typeof b) // 120 'number'
The following example, however, performs regular string concatenation as unary plus is missing before '10'
.
var x3 = 1 + '10' // not unary plus
console.info(x3, typeof x3) // 110 'string'
Be careful when you use the unary plus conversion. If you accidentally miss it, you may end up with a hard-to-find bug. The following example illustrates that type of problem. The first comparison returns true
value for x == 10
comparison but not for x === 10
. The second statement works as expected though.
var x = '10'
console.info(x == 10, x === 10) // true, false - not what we would expect
// but this works as expected
var x = +'10'
console.info(x == 10, x === 10) // true, true - correct!
If you provide a string, which is already in the form of an integer or float, as an argument of Math.floor
, Math.ceil
, Math.abs
, Math.round
or Math.trunc
then the method automatically converts a string to a number e.g.
var x = Math.floor('10')
console.info(x, typeof x) // 10 'number'
x = Math.floor('10.10')
console.info(x, typeof x) // 10 'number'
x = Math.round('233')
console.info(x, typeof x) // 233 'number'
x = Math.ceil('233')
console.info(x, typeof x) // 233 'number'
x = Math.abs('233')
console.info(x, typeof x) // 233 'number'
x = Math.trunc('123')
console.info(x, typeof x) // 123 'number'
NOTE that the value of Math.floor(x)
is the same as the value of -Math.ceil(-x)
.