Many situations originated during the development of angular/typescript-based projects as a result of writing this blog post.
Number
and String
are basic Inbuilt primitive datatypes in typescript programming language.
Every developer is already aware of these types.
The number holds numeric values, String holds a group of characters enclosed in double or single quotes.
Variables of these types hold different values.
The number type does not convert to the String type automatically, Therefore, Developers have to write a code to do 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 this case, the typeof
method checks the value type and returns the primitive type as a string.
In typescript, +
is an operator used to append the 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: