Introduction :
Casting a string to number in typescript requires Javascript methods. Typescript doesn’t provide any specific methods for this conversion. Again, we have a couple of different methods in Javascript that can convert one string to a number. In this post, I will show you different ways to do the conversion. With each example, I am using an array of different strings. Each example will try to convert each of these array elements to numbers.
Using Number(n) :
We can create one Number object by passing one string like Number(n) without using the new keyword. It returns one Number object. Let’s try it with different strings :
const values = ['',' ','1','0.2','12.4','1e-3','1.34e5','12,22','12.944','10abc','ab10c','abc',null,'0x11','Infinity','0x11.abc','10.abc']
values.forEach(e => {
console.log(`${e} => ${Number(e)}`);
})
Output :
It will print the below output :
=> 0
=> 0
1 => 1
0.2 => 0.2
12.4 => 12.4
1e-3 => 0.001
1.34e5 => 134000
12,22 => NaN
12.944 => 12.944
10abc => NaN
ab10c => NaN
abc => NaN
null => 0
0x11 => 17
Infinity => Infinity
0x11.abc => NaN
10.abc => NaN
Using parseInt :
parseInt parses one string and returns its integer value. It takes the string value as the first parameter and optionally one radix value as the second parameter. The Radix parameter determines the base to be used. You should always provide this radix value as 10 if you are dealing with the decimal number system. If you don’t provide anything, it may produce different results.
Let’s try the same array of string we have used with Number above :
const values = ['', ' ', '1', '0.2', '12.4', '1e-3', '1.34e5', '12,22', '12.944', '10abc', 'ab10c', 'abc', null, '0x11', 'Infinity', '0x11.abc', '10.abc']
values.forEach(e => {
console.log(`${e} => ${parseInt(e, 10)}`);
})
Output :
=> NaN
=> NaN
1 => 1
0.2 => 0
12.4 => 12
1e-3 => 1
1.34e5 => 1
12,22 => 12
12.944 => 12
10abc => 10
ab10c => NaN
abc => NaN
null => NaN
0x11 => 0
Infinity => NaN
0x11.abc => 0
10.abc => 10
It parses the number that is at the start of the string. If the string is not starting with a number, it returns NaN.
Using parseFloat :
parseFloat takes only one parameter i.e. the string. It converts that string to a floating-point number.
const values = ['', ' ', '1', '0.2', '12.4', '1e-3', '1.34e5', '12,22', '12.944', '10abc', 'ab10c', 'abc', null, '0x11', 'Infinity', '0x11.abc', '10.abc']
values.forEach(e => {
console.log(`${e} => ${parseFloat(e)}`);
})
Output :
=> NaN
=> NaN
1 => 1
0.2 => 0.2
12.4 => 12.4
1e-3 => 0.001
1.34e5 => 134000
12,22 => 12
12.944 => 12.944
10abc => 10
ab10c => NaN
abc => NaN
null => NaN
0x11 => 0
Infinity => Infinity
0x11.abc => 0
10.abc => 10
Use parseFloat if you want to retain the decimal part as well.
Using + :
This is another way to convert a string to a number. We can use one + before a string to convert it to a number.
const values = ['', ' ', '1', '0.2', '12.4', '1e-3', '1.34e5', '12,22', '12.944', '10abc', 'ab10c', 'abc', null, '0x11', 'Infinity', '0x11.abc', '10.abc']
values.forEach(e => {
console.log(`${e} => ${+e}`);
})
Output :
=> 0
=> 0
1 => 1
0.2 => 0.2
12.4 => 12.4
1e-3 => 0.001
1.34e5 => 134000
12,22 => NaN
12.944 => 12.944
10abc => NaN
ab10c => NaN
abc => NaN
null => 0
0x11 => 17
Infinity => Infinity
0x11.abc => NaN
10.abc => NaN
Combining all :
const values = ['', ' ', '1', '0.2', '12.4', '1e-3', '1.34e5', '12,22', '12.944', '10abc', 'ab10c', 'abc', null, '0x11', 'Infinity', '0x11.abc', '10.abc']
values.forEach(e => {
console.log(e);
console.log(`Number: => ${Number(e)}`);
console.log(`parseInt: => ${parseInt(e, 10)}`);
console.log(`parseFloat: => ${parseFloat(e)}`);
console.log(`+: => ${+e}`);
console.log(`*******************************`)
})
Output :
Number: => 0
parseInt: => NaN
parseFloat: => NaN
+: => 0
*******************************
Number: => 0
parseInt: => NaN
parseFloat: => NaN
+: => 0
*******************************
1
Number: => 1
parseInt: => 1
parseFloat: => 1
+: => 1
*******************************
0.2
Number: => 0.2
parseInt: => 0
parseFloat: => 0.2
+: => 0.2
*******************************
12.4
Number: => 12.4
parseInt: => 12
parseFloat: => 12.4
+: => 12.4
*******************************
1e-3
Number: => 0.001
parseInt: => 1
parseFloat: => 0.001
+: => 0.001
*******************************
1.34e5
Number: => 134000
parseInt: => 1
parseFloat: => 134000
+: => 134000
*******************************
12,22
Number: => NaN
parseInt: => 12
parseFloat: => 12
+: => NaN
*******************************
12.944
Number: => 12.944
parseInt: => 12
parseFloat: => 12.944
+: => 12.944
*******************************
10abc
Number: => NaN
parseInt: => 10
parseFloat: => 10
+: => NaN
*******************************
ab10c
Number: => NaN
parseInt: => NaN
parseFloat: => NaN
+: => NaN
*******************************
abc
Number: => NaN
parseInt: => NaN
parseFloat: => NaN
+: => NaN
*******************************
null
Number: => 0
parseInt: => NaN
parseFloat: => NaN
+: => 0
*******************************
0x11
Number: => 17
parseInt: => 0
parseFloat: => 0
+: => 17
*******************************
Infinity
Number: => Infinity
parseInt: => NaN
parseFloat: => Infinity
+: => Infinity
*******************************
0x11.abc
Number: => NaN
parseInt: => 0
parseFloat: => 0
+: => NaN
*******************************
10.abc
Number: => NaN
parseInt: => 10
parseFloat: => 10
+: => NaN
*******************************
