How to convert a string to number in TypeScript?
How to convert a string to number in TypeScript?
Question
Given a string representation of a number, how can I convert it to number
type in TypeScript?
var numberString: string = "1234";
var numberValue: number = /* what should I do with `numberString`? */;
Accepted Answer
Exactly like in JavaScript, you can use the parseInt
or parseFloat
functions, or simply use the unary +
operator:
var x = "32";
var y: number = +x;
All of the mentioned techniques will have correct typing and will correctly parse simple decimal integer strings like "123"
, but will behave differently for various other, possibly expected, cases (like "123.45"
) and corner cases (like null
).
Table taken from this answer
Popular Answer
The Typescript way to do this would be:
Number('1234') // 1234
Number('9BX9') // NaN
as answered here: https://stackoverflow.com/a/23440948/2083492
Read more… Read less…
For our fellow Angular users:
Within a template, Number(x)
and parseInt(x)
throws an error, and +x
has no effect. Valid casting will be x*1
or x/1
.
As shown by other answers here, there are multiple ways to do the conversion:
Number('123');
+'123';
parseInt('123');
parseFloat('123.45')
I'd like to mention one more thing on parseInt
though.
When using parseInt
, it makes sense to always pass the radix parameter. For decimal conversion, that is 10
. This is the default value for the parameter, which is why it can be omitted. For binary, it's a 2
and 16
for hexadecimal. Actually, any radix between and including 2 and 36 works.
parseInt('123') // 123 (don't do this)
parseInt('123', 10) // 123 (much better)
parseInt('1101', 2) // 13
parseInt('0xfae3', 16) // 64227
The parseInt
function, well, parses strings to convert them to numbers. In some JS implementations, parseInt
parses leading zeros as octal:
Although discouraged by ECMAScript 3 and forbidden by ECMAScript 5, many implementations interpret a numeric string beginning with a leading 0 as octal. The following may have an octal result, or it may have a decimal result. Always specify a radix to avoid this unreliable behavior.
— MDN
The fact that code gets clearer is a nice side effect of specifying the radix parameter.
Since parseFloat
only parses numeric expressions in radix 10, there's no need for a radix parameter here.
Expounding on what Ryan said, TypeScript embraces the JavaScript idioms in general.
var n = +"1"; // the unary + converts to number
var b = !!"2"; // the !! converts truthy to true, and falsy to false
var s = ""+3; // the ""+ converts to string via toString()
All the interesting in-depth details at JavaScript Type Conversion.
You can follow either of the following ways.
var str = '54';
var num = +str; //easy way by using + operator
var num = parseInt(str); //by using the parseInt operation
String to number conversion:
In Typescript we convert a string to a number in the following ways:
ParseInt()
: This function takes 2 arguments, the first is a string to parse. The second is the radix (the base in mathematical numeral systems, e.g. 10 for decimal and 2 for binary). It then returns the integer number, if the first character cannot be converted into a number,NaN
will be returned.ParseFloat()
: Takes as an argument the value which we want to parse, and returns a floating point number. If the value cannot be converted to a number,NaN
is returned.+
operator: The operator when used appropriately can coerce a string value into a number.
Examples:
/* parseInt */
// note that a whole number is returned, so it will round the number
console.log(parseInt('51.023124'));
// parseInt will 'cut off' any part of the string which is not a number
console.log(parseInt('5adfe1234'));
// When the string starts with non number NaN is returned
console.log(parseInt('z123'));
console.log('--------');
/* parseFloat */
// parses the string into a number and keeping the precision of the number
console.log(typeof parseFloat('1.12321423'));
// parseFloat will 'cut off' any part of the string which is not a number
console.log(parseFloat('5.5abc'));
console.log('--------');
/* + operator */
let myString = '12345'
console.log(typeof +myString);
let myOtherString = '10ab'
// + operator will not cut off any 'non number' string part and will return NaN
console.log(+myOtherString);
Which to use?
- Use
ParseInt()
when you want a string converted to an integer. However, the data type is still a float, since all number values are floating point values in TS. Also use this method when you need to specifiy the radix of the number you want to parse. - Use
ParseFloat()
when you need to parse a string into a floating point number. - You can use the
+
operator before a string to coerce it into a floating point number. The advantage of this is that the syntax is very short.