Top 5 ways to Convert Number to/from String in typescript?
- Admin
- Sep 20, 2023
- Typescript Angular
Did you face a situation where you want to parse number
to string
or string
to number
in typescript?
Many situations originated during the development of angular/typescript-based projects as a result of writing this blog post.
In the typescript programming language, the fundamental datatypes Number
and `String“ are basic Inbuilt primitive datatypes.
These are already known to every developer.
Every developer is already aware of these types.
The number represents numeric values, whereas String
represents a group of characters surrounded in double
or single
quotes
These variables have different values.
Because the integer type does not automatically convert to the String type, developers have to write code that performs the manual conversion. The number to String and String to Number conversions are some of the simple tasks of typescript developers. For conversion to number, a String must contain only numbers.
How to Convert Number to String in Typescript examples
There are multiple ways we can convert Number to String in Javascript or typescript.
- Append with an empty string.
- toString() method
- string constructor You can check another post on Fix for Object is possibly null
using Append number with an empty string
This is an easy and simple way to parse a number into a string.
For example, given number values are 11,13, add an empty string and return a string object.
In typescript, +
is an operator used to append the string.
In this case, the typeof
method checks the value type and returns the primitive type as a string.
The Below example converts valid and invalid values to String.
The below example number is a valid numeric value ie 12,
var a: number = 12;
var str: string = a + "";
console.log(typeof a); // output number as output
console.log(typeof str); // output string as output
console.log(str); //outputs 12 as string value
var a: number = null;
var str: string = a + "";
console.log(typeof str); // output string as output
console.log(str); //outputs null in the form of string
var a: number = undefined;
var str: string = a + "";
console.log(typeof str); // output string as output
console.log(str); //outputs undefined in the form of string
using toString() method
The toString()
method is an in-built method that every data type has. It returns a string version of an object.
calling the toString() method on any data type returns a string object.
var a: number = 17;
var str: string = a.toString();
console.log(typeof str); // output string as output
console.log(a); //outputs 12 as string value
if we use null and undefined with the toString() method, the compiler through the Cannot read property 'toString' of null
error.
Using string constructor
The string constructor accepts any value and returns a string.
This approach is useful when you are creating the string. And it is the easiest way of a converted numbers to string types.
Here is an example
var a: number = 12
var stringValue = String(a);
console.log(typeof(stringValue) // outpus string as output
How to Convert String to Number in Typescript example
This section solves some of the below problems.
- How to convert a string to an integer?
- How to parse the string to floating-point numbers with decimal precision.
The string converts to a number in multiple ways.
First, String must contain numeric values enclosed in single or double,
Input is a valid string numeric value, an example is 123
and output always returns 123 of the type number.
if the string is not a numeric value, All these conversion ways return the NAN
value.
There are multiple easy and short ways to parse String to number value
- parseInt method
- parseFloat method
- Number() constructor
- plus operator
Using parseInt() native method
It is used to parse string to number in decimal places.
parseInt
is an inbuilt method that takes input numbers in the form of a string and returns numbers.
Syntax
parseInt(string, radix);
The string is a numeric string enclosed in single or double quotes. Radix is an optional parameter, possible values are
- 16 -
Hexa number
, - 8 -
Octa number
- 2 -
Binary number
- 10 -
Decimal number ie default
The possible output is
- Valid number - if the string is valid numeric values enclosed in single or double quote
- NAN - input string is either not a valid number or null or undefined.
console.log(parseInt("32", 10)); // outputs 32 as output
console.log(parseInt("45")); // outputs 45 as output
console.log(parseInt("45abc")); // outputs 45 as output
console.log(parseInt("null")); // outputs NaN as output
console.log(parseInt("45")); // outputs 45 as output
Using parseFloat() method
parseFloat
is an inbuilt method that accepts a number in string format and converts it to a number in floating number format.
The possible output is
- Valid floating number - if the string is valid numeric values enclosed in single or double quote
- NAN - input string is not a valid numeric value or null or undefined.
Syntax is
parseFloat(string, radix);
Here is an example
console.log(parseFloat("32.32")); // outputs 32.32 as output
This method is useful for converting to floating numbers that contain decimal places.
Using Number() method
The number () constructor takes a string as a parameter and returns a number as the output
console.log(Number("12")); // outputs 12 as output
console.log(Number("null")); // outputs NaN as output
console.log(Number("undefined")); // outputs NaN as output
Using plus unary operator
This is a unary operator which accepts only one operand. This accepts strings, boolean values, and all types of numbers and converts them to numbers.
syntax
+string / boolean / number;
Input is
- string
- boolean
- all number types - Hexa, octal, floating numbers
The possible output is
- Valid number - if the string is valid numeric values enclosed in single or double quote
- NAN - input string is not a valid numeric value or null or undefined.
console.log(+"44"); // outputs 44
console.log(+"44.23"); // outputs 44.23
console.log(+true); // outputs 1
console.log(+false); // outputs 0
console.log(+undefined); // outputs 0
console.log(+null); // outputs 0
Conclusion
It is important to learn possible ways of typescript conversion with primitive types. Most of the above examples will work in javascript because typescript is a superset of javascript.
I hope you learned many ways to get the string to/from the number in typescript. In addition, make sure you are sending valid strings with numbers for conversion, In this way, It is a very easy way to parse numbers.
Reference: