We can convert string to an integer or number with few different ways. In this article, we’ll see all different ways to convert string to number in javascript or typescript or in angular.
Table of Contents
Convert string to int typescript
Here are the different methods to convert string to number. We’ll see an example of each methods.
- Converting a string to number/integer using Native
Number()function. - Converting a string to number/integer using
parseInt()function. - Converting a string to number/integer using
parseFloat()function. - Converting a string to number/integer using
Math.floor()function. - Converting a string to number/integer using
Math.round()function. - Converting a string to number/integer using
Math.ceil()function. - Converting a string to number/integer by
multiplying with 1. - Converting a string to number/integer using
unary plus.
Example for converting string to number
We’ll see examples to convert string to number for all of the above methods.
1. Converting a string to number/integer using Native Number() function.
Number() function convert the value of a string or other types to number type.
If the value can’t be convert to number it’ll return NaN
var test1 = "123";
console.log("Output of 123", Number(test1));
//Output of 123: 123
var test2 = "+123";
console.log("Output of +123: ", Number(test2));
//Output of +123: 123
var test3 = "-123";
console.log("Output of -123: ", Number(test3));
//Output of -123: -123
var test4 = "-123.45";
console.log("Output of -123.45: ", Number(test4));
//Output of -123.45: -123.45
var test5 = "+123.45";
console.log("Output of +123.45: ", Number(test5));
//Output of +123.45: 123.45
var test6 = "123XYZ";
console.log("Output of 123XYZ: ", Number(test6));
//Output of 123XYZ: NaN
var test7 = undefined;
console.log("Output of undefined: ", Number(test7));
//Output of undefined: NaN
var test8 ="00123";
console.log("Output of 00123: ", Number(test8));
//Output of 00123: 123
var test9 = "";
console.log("Output of '': ", Number(test9));
//Output of '': 0
var test10 = null;
console.log("Output of null: ", Number(test10));
//Output of undefined: NaN
2. Converting a string to number/integer using parseInt() function.
The parseInt() function parses a string and returns an integer of the specified radix.
If the first character cannot be converted to a number, NaN is returned.
parseInt() method will parse the string value until a non-numeric character is encountered and then it will discard the remainder of the string and will return an integer value.
Syntax :
parseInt(string [, radix])
You can make use of the radix. The radix can be from 2 to 36. Use 2 for binary, 8 for octal, 10 for decimal & 16 for HexaDecimal number.
Here we’ll use radix of 10, because radix of 10 converts from a decimal number.
var test1 = "123";
console.log("Output of 123", parseInt(test1, 10));
//Output of 123: 123
var test2 = "+123";
console.log("Output of +123: ", parseInt(test2, 10));
//Output of +123: 123
var test3 = "-123";
console.log("Output of -123: ", parseInt(test3, 10));
//Output of -123: -123
var test4 = "-123.45";
console.log("Output of -123.45: ", parseInt(test4, 10));
//Output of -123.45: -123
var test5 = "+123.45";
console.log("Output of +123.45: ", parseInt(test5, 10));
//Output of +123.45: 123
var test6 = "123XYZ";
console.log("Output of 123XYZ: ", parseInt(test6, 10));
//Output of 123XYZ: 123
var test7 = undefined;
console.log("Output of undefined: ", parseInt(test7, 10));
//Output of undefined: NaN
var test8 ="00123";
console.log("Output of 00123: ", parseInt(test8, 10));
//Output of 00123: 123
var test9 = "";
console.log("Output of '': ", parseInt(test9, 10));
//Output of '': NaN
var test10 = null;
console.log("Output of null: ", parseInt(test10, 10));
//Output of undefined: NaN
var test11 ="XYZ123";
console.log("Output of null: ", parseInt(test11, 10));
//Output of XYZ123: NaN
Here in the above example, you can see for test4= "-123.45", it returns only the integer part of it which is -123.
and for test6="123XYZ", parseInt() will parse the string until non-numeric character found and then it’ll discard rest of the string. so it’ll return 123
and for test11="XYZ123", the first character can not be converted to number so it’ll return NaN.
console.log(parseInt("100")) //100
console.log(parseInt("100.5175")) //100
console.log(parseInt("10AA0.5175")) //10
console.log(parseInt("")) //NaN
console.log(parseInt(null)) //NaN
console.log(parseInt(Infinity)) //NaN
console.log(parseInt(true)) //NaN
console.log(parseInt(false)) //NaN
console.log(parseInt("0x22")) //34
console.log(parseInt("0022")) //22
console.log(parseInt("0o51")) //0
console.log(parseInt("3.125e7")) //3
console.log(parseInt("35 35")) //35
console.log(parseInt("AB 35")) //NaN
3. Converting a string to number/integer using parseFloat() function.
parseFloat() function parses a string and returns a floating point number.
parseFloat() function checks if the first character in the specified string is a number. and If it is number, it parses the string until it encounters non-numeric character, and returns the number.
Only the first number in the string is returned
If the first character couldn’t be converted to a number, parseFloat() will returns NaN.
Syntax :
parseFloat(string)
var test1 = "123";
console.log("Output of 123", parseFloat(test1));
//Output of 123: 123
var test2 = "+123";
console.log("Output of +123: ", parseFloat(test2));
//Output of +123: 123
var test3 = "-123";
console.log("Output of -123: ", parseFloat(test3));
//Output of -123: -123
var test4 = "-123.45";
console.log("Output of -123.45: ", parseFloat(test4));
//Output of -123.45: -123.45
var test5 = "+123.45";
console.log("Output of +123.45: ", parseFloat(test5));
//Output of +123.45: 123.45
var test6 = "123XYZ";
console.log("Output of 123XYZ: ", parseFloat(test6));
//Output of 123XYZ: 123
var test7 = undefined;
console.log("Output of undefined: ", parseFloat(test7));
//Output of undefined: NaN
var test8 ="00123";
console.log("Output of 00123: ", parseFloat(test8));
//Output of 00123: 123
var test9 = "";
console.log("Output of '': ", parseFloat(test9));
//Output of '': NaN
var test10 = null;
console.log("Output of null: ", parseFloat(test10));
//Output of undefined: NaN
var test11 = "XYZ123";
console.log("Output of null: ", parseFloat(test11));
//Output of XYZ123: NaN
var test12 = "00123.45XYZ";
console.log("Output of 00123.45XYZ: ", parseFloat(test12));
//Output of XYZ123: 123.45
Here in the above example, you can see for test4= "-123.45", it returns only the floating point number which is -123.45.
and for test6="123XYZ", parseFloat() will parse the string until non-numeric character found and then it’ll discard rest of the string. so it’ll return 123
and for test11="XYZ123", the first character can not be converted to number so it’ll return NaN.
and for test12 = "00123.45XYZ" parseFloat() will parse the string until non-numeric character found and then it’ll discard rest of the string. so it’ll return 123.45
console.log(parseFloat("100")) //100
console.log(parseFloat("100.5175")) //100.5175
console.log(parseFloat("10AA0.5175")) //10
console.log(parseFloat("")) //NaN
console.log(parseFloat(null)) //NaN
console.log(parseFloat(Infinity)) //Infinity
console.log(parseFloat(true)) //NaN
console.log(parseFloat(false)) //NaN
console.log(parseFloat("0x22")) //0
console.log(parseFloat("0022")) //22
console.log(parseFloat("0o51")) //0
console.log(parseFloat("3.125e7")) //31250000
console.log(parseFloat("35 35")) //35
console.log(parseFloat("AB 35")) //NaN
4. Converting a string to number/integer using Math.floor() function.
Math.floor() function returns largest integer less than or equal to the supplied value.
So Math.floor() will be useful when you want to convert string to integer.
Syntax :
Math.floor(x)
Here are few examples of it.
var test1 = "123";
console.log("Output of 123: ", Math.floor(test1));
//"Output of 123: " 123
var test2 = "+123";
console.log("Output of +123: ", Math.floor(test2));
//"Output of +123: " 123
var test3 = "-123";
console.log("Output of -123: ", Math.floor(test3));
//"Output of -123: " -123
var test4 = "-123.45";
console.log("Output of -123.45: ", Math.floor(test4));
//"Output of -123.45: " -124
var test5 = "+123.45";
console.log("Output of +123.45: ", Math.floor(test5));
//"Output of +123.45: " 123
var test6 = "123XYZ";
console.log("Output of 123XYZ: ", Math.floor(test6));
//"Output of 123XYZ: " NaN
var test7 = undefined;
console.log("Output of undefined: ", Math.floor(test7));
//"Output of undefined: " NaN
var test8 ="00123";
console.log("Output of 00123: ", Math.floor(test8));
//"Output of 00123: " 123
var test9 = "";
console.log("Output of '': ", Math.floor(test9));
//"Output of '': " 0
var test10 = null;
console.log("Output of null: ", Math.floor(test10));
//"Output of undefined: " 0
var test11 = "XYZ123";
console.log("Output of null: ", Math.floor(test11));
//"Output of XYZ123: " NaN
var test12 = "00123.45XYZ";
console.log("Output of 00123.45XYZ: ", Math.floor(test12));
//"Output of XYZ123: " NaN
Here you can see in the above example for test4 = "-123.45", Math.floor() returns -124. Because -124 largest integer less than -123.45.
5. Converting a string to number/integer using Math.round() function.
The Math.round() function returns the value of a number rounded to the nearest integer.
Syntax :
Math.round(x)
var test1 = "123";
console.log("Output of 123: ", Math.round(test1));
//"Output of 123: " 123
var test2 = "+123";
console.log("Output of +123: ", Math.round(test2));
//"Output of +123: " 123
var test3 = "-123";
console.log("Output of -123: ", Math.round(test3));
//"Output of -123: " -123
var test4 = "-123.45";
console.log("Output of -123.45: ", Math.round(test4));
//"Output of -123.45: " -124
var test5 = "+123.45";
console.log("Output of +123.45: ", Math.round(test5));
//"Output of +123.45: " 123
var test6 = "123XYZ";
console.log("Output of 123XYZ: ", Math.round(test6));
//"Output of 123XYZ: " NaN
var test7 = undefined;
console.log("Output of undefined: ", Math.round(test7));
//"Output of undefined: " NaN
var test8 ="00123";
console.log("Output of 00123: ", Math.round(test8));
//"Output of 00123: " 123
var test9 = "";
console.log("Output of '': ", Math.round(test9));
//"Output of '': " 0
var test10 = null;
console.log("Output of null: ", Math.round(test10));
//"Output of undefined: " 0
var test11 = "XYZ123";
console.log("Output of null: ", Math.round(test11));
//"Output of XYZ123: " NaN
var test12 = "00123.45XYZ";
console.log("Output of 00123.45XYZ: ", Math.round(test12));
//"Output of XYZ123: " NaN
6. Converting a string to number/integer using Math.ceil() function.
The Math.ceil() function returns smallest integer greater than or equal to the given number.
Syntax :
Math.ceil(x)
Few test results:
var test1 = "123";
console.log("Output of 123: ", Math.ceil(test1));
//"Output of 123: " 123
var test2 = "+123";
console.log("Output of +123: ", Math.ceil(test2));
//"Output of +123: " 123
var test3 = "-123";
console.log("Output of -123: ", Math.ceil(test3));
//"Output of -123: " -123
var test4 = "-123.45";
console.log("Output of -123.45: ", Math.ceil(test4));
//"Output of -123.45: " -123
var test5 = "+123.45";
console.log("Output of +123.45: ", Math.ceil(test5));
//"Output of +123.45: " 124
var test6 = "123XYZ";
console.log("Output of 123XYZ: ", Math.ceil(test6));
//"Output of 123XYZ: " NaN
var test7 = undefined;
console.log("Output of undefined: ", Math.ceil(test7));
//"Output of undefined: " NaN
var test8 ="00123";
console.log("Output of 00123: ", Math.ceil(test8));
//"Output of 00123: " 123
var test9 = "";
console.log("Output of '': ", Math.ceil(test9));
//"Output of '': " 0
var test10 = null;
console.log("Output of null: ", Math.ceil(test10));
//"Output of undefined: " 0
var test11 = "XYZ123";
console.log("Output of null: ", Math.ceil(test11));
//"Output of XYZ123: " NaN
var test12 = "00123.45XYZ";
console.log("Output of 00123.45XYZ: ", Math.ceil(test12));
//"Output of XYZ123: " NaN
7. Converting a string to number/integer by multiplying with 1.
We can also convert string to number in typescript or javascript by multiplying number with 1.
var test1 = "123";
console.log("Output of 123: ", test1*1);
//"Output of 123: " 123
var test2 = "+123";
console.log("Output of +123: ", test2*1);
//"Output of +123: " 123
var test3 = "-123";
console.log("Output of -123: ", test3*1);
//"Output of -123: " -123
var test4 = "-123.45";
console.log("Output of -123.45: ", test4*1);
//"Output of -123.45: " -123.45
var test5 = "+123.45";
console.log("Output of +123.45: ", test5*1);
//"Output of +123.45: " 123.45
var test6 = "123XYZ";
console.log("Output of 123XYZ: ", test6*1);
//"Output of 123XYZ: " NaN
var test7 = undefined;
console.log("Output of undefined: ", test7*1);
//"Output of undefined: " NaN
var test8 ="00123";
console.log("Output of 00123: ", test8*1);
//"Output of 00123: " 123
var test9 = "";
console.log("Output of '': ", test9*1);
//"Output of '': " 0
var test10 = null;
console.log("Output of null: ",test10*1);
//"Output of undefined: " 0
var test11 = "XYZ123";
console.log("Output of null: ", test11*1);
//"Output of XYZ123: " NaN
var test12 = "00123.45XYZ";
console.log("Output of 00123.45XYZ: ", test12*1);
//"Output of XYZ123: " NaN
8. Converting a string to number/integer using unary plus.
The another approach to convert string to number is using unary plus operator. It has better performance but lacks readability.
var test1 = "123";
console.log("Output of 123: ", +test1);
//"Output of 123: " 123
var test2 = "+123";
console.log("Output of +123: ", +test2);
//"Output of +123: " 123
var test3 = "-123";
console.log("Output of -123: ", +test3);
//"Output of -123: " -123
var test4 = "-123.45";
console.log("Output of -123.45: ", +test4);
//"Output of -123.45: " -123.45
var test5 = "+123.45";
console.log("Output of +123.45: ", +test5);
//"Output of +123.45: " 123.45
var test6 = "123XYZ";
console.log("Output of 123XYZ: ", +test6);
//"Output of 123XYZ: " NaN
var test7 = undefined;
console.log("Output of undefined: ", +test7);
//"Output of undefined: " NaN
var test8 ="00123";
console.log("Output of 00123: ", +test8);
//"Output of 00123: " 123
var test9 = "";
console.log("Output of '': ", +test9);
//"Output of '': " 0
var test10 = null;
console.log("Output of null: ",+test10);
//"Output of undefined: " 0
var test11 = "XYZ123";
console.log("Output of null: ", +test11);
//"Output of XYZ123: " NaN
var test12 = "00123.45XYZ";
console.log("Output of 00123.45XYZ: ", +test12);
//"Output of XYZ123: " NaN
console.log(+"100") //100
console.log(+"100.5175") //100.5175
console.log(+"10AA0.5175") //NaN
console.log(+"") //0
console.log(+" ") //0
console.log(+null) //0
console.log(+undefined) //Nan
console.log(+Infinity) //Infinity
console.log(+true) //1
console.log(+false) //0
console.log(+"0x22") //34
console.log(+"0022") //22
console.log(+"0o51") //41
console.log(+"3.125e7") //31250000
console.log(+"35 35") //NaN
console.log(+"AB 35") //NaN
Here in this table, you can see the output of different methods.
| x | Number(x) | parseInt(x) | parseFloat(x) | Math.floor(x) | Math.round(x) | Math.ceil(x) | x*1 | +x |
| “123” | 123 | 123 | 123 | 123 | 123 | 123 | 123 | 123 |
| “+123” | 123 | 123 | 123 | 123 | 123 | 123 | 123 | 123 |
| “-123” | -123 | -123 | -123 | -123 | -123 | -123 | -123 | -123 |
| “123.45” | 123.45 | 123 | 123.45 | 123 | 123 | 124 | 123.45 | 123.45 |
| “-123.45” | -123.45 | -123 | -123.45 | -124 | -123 | -123 | -123.45 | -123.45 |
| “12e5” | 1200000 | 12 | 1200000 | 1200000 | 1200000 | 1200000 | 1200000 | 1200000 |
| “12e-5” | 0.00012 | 12 | 0.00012 | 0 | 0 | 1 | 0.00012 | 0.00012 |
| “0123” | 123 | 123 | 123 | 123 | 123 | 123 | 123 | 123 |
| “0000123” | 123 | 123 | 123 | 123 | 123 | 123 | 123 | 123 |
| “0b111” | 7 | 0 | 0 | 7 | 7 | 7 | 7 | 7 |
| “0o10” | 8 | 0 | 0 | 8 | 8 | 8 | 8 | 8 |
| “0xBABE” | 47806 | 47806 | 0 | 47806 | 47806 | 47806 | 47806 | 47806 |
| “4294967295” | 4294967295 | 4294967295 | 4294967295 | 4294967295 | 4294967295 | 4294967295 | 4294967295 | 4294967295 |
| “123456789012345678” | 123456789012345680 | 123456789012345680 | 123456789012345680 | 123456789012345680 | 123456789012345680 | 123456789012345680 | 123456789012345680 | 123456789012345680 |
| “12e999” | Infinity | 12 | Infinity | Infinity | Infinity | Infinity | Infinity | Infinity |
| “” | 0 | NaN | NaN | 0 | 0 | 0 | 0 | 0 |
| “123foo” | NaN | 123 | 123 | NaN | NaN | NaN | NaN | NaN |
| “123.45foo” | NaN | 123 | 123.45 | NaN | NaN | NaN | NaN | NaN |
| ” 123 “ | 123 | 123 | 123 | 123 | 123 | 123 | 123 | 123 |
| “foo” | NaN | NaN | NaN | NaN | NaN | NaN | NaN | NaN |
| “12e” | NaN | 12 | 12 | NaN | NaN | NaN | NaN | NaN |
| “0b567” | NaN | 0 | 0 | NaN | NaN | NaN | NaN | NaN |
| “0o999” | NaN | 0 | 0 | NaN | NaN | NaN | NaN | NaN |
| “0xFUZZ” | NaN | 15 | 0 | NaN | NaN | NaN | NaN | NaN |
| “+0” | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 |
| “-0” | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 |
| “Infinity” | Infinity | NaN | Infinity | Infinity | Infinity | Infinity | Infinity | Infinity |
| “+Infinity” | Infinity | NaN | Infinity | Infinity | Infinity | Infinity | Infinity | Infinity |
| “-Infinity” | -Infinity | NaN | -Infinity | -Infinity | -Infinity | -Infinity | -Infinity | -Infinity |
| null | 0 | NaN | NaN | 0 | 0 | 0 | 0 | 0 |
| undefined | NaN | NaN | NaN | NaN | NaN | NaN | NaN | NaN |
| true | 1 | NaN | NaN | 1 | 1 | 1 | 1 | 1 |
| false | 0 | NaN | NaN | 0 | 0 | 0 | 0 | 0 |
| Infinity | Infinity | NaN | Infinity | Infinity | Infinity | Infinity | Infinity | Infinity |
| NaN | NaN | NaN | NaN | NaN | NaN | NaN | NaN | NaN |
| {} | NaN | NaN | NaN | NaN | NaN | NaN | NaN | NaN |
| {valueOf: function(){return 42}} | 42 | NaN | NaN | 42 | 42 | 42 | 42 | 42 |
| {toString: function(){return “56”}} | 56 | 56 | 56 | 56 | 56 | 56 | 56 | 56 |
Taken From SO Answer: Converting a string to number
Conclusion
There are many ways to convert string to number in javascript/typescript but it’s upto the developer to choose the right approach based on performance or readability.
I hope you like this article.
Also Read:
- Different ways to read Local JSON file in Angular with example
- Angular Material Grid Layout Example
- Angular Material Select Change Event Example
- Angular Material Date Range Picker
- What’s new in Angular 10
- How to install angular material in Angular Application
- How to use Angular APP_INITIALIZER token
- Integrate CKEditor(rich text editor) in Angular
- How to check Angular CLI version and how to update it.
- Different ways to install bootstrap 4 in angular application