How to Convert Number to String or String to Number example in typescript

Did you face the situation where you want to parse number to string or string to number in typescript? During the development of angular/typescript based projects, I got many situations that are 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. Variable of these types hold different values.

Number type does not convert to String type automatically, Therefore, Developers have to write a code to do the manual conversion.

The Number to String conversion examples.

There are multiple ways we can convert Number to String in javascript or typescript.

• Append with an empty string.
• toString() method
• string constructor

Append number with an empty string.

This is an easy and simple way parse number to a string. For example, given number values are 11,13,  add an empty string to Number value returns a string object typeof method checks value type and returns 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 valid numeric value ie 12,

var a: number = 12
var str: string = a + '';
console.log(typeof (a)) // outpus number  as output
console.log(typeof (str)) // outpus string as output
console.log(str) //outputs 12 as string value

var a: number = null
var str: string = a + '';
console.log(typeof (str)) // outpus 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)) // outpus string as output
console.log(str) //outputs undefined in the form of string

toString() method

toString() method is an inbuilt method which every data type has, It returns string version of an object. calling toString() method  on any data types returns string object

var a: number = 17
var str: string = a .toString()
console.log(typeof (str)) // outpus string as output
console.log(a) //outputs 12 as string value

if we use null and undefined with toString() method, compiler through Cannot read property 'toString' of null error.

string constructor

String constructor accepts any value and returns a string. This approach useful when you are creating the string. this is the easiest way of a converted number to string type

var a: number = 12
var stringValue = String(a);
console.log(typeof(stringValue) // outpus string  as output

Convert String to Number example 

This section solves some of the below problems.

• How to convert string to integer
• How to parse string to floating point number with decimal precission.

The string can be converted to number in multiple ways. First,String must contain numeric values enclsed in single or double, Input is valid string numeric value, example is 123 and output always return 123 of type number. if string is not numeric value, All these conversion ways return NAN value.

There multiple easy and short ways to parse String to number value

• parseInt  method
• parseFloat method
• Number() constructor
• plus operator

parseInt() native method

This will be used to parse string to number in decimal places

parseInt is an inbuilt method that takes input number in the form of a string and return number.

Syntax is

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 string is valid numeric values enclosed in single or double quote
• NAN -  input string is either not valid number or null or undefined.

console.log(parseInt('32', 10)) // outpus 32 as output
console.log(parseInt('45')) // outpus 45 as output
console.log(parseInt('45abc')) // outpus 45 as output
console.log(parseInt('null')) // outpus NaN as output
console.log(parseInt('45')) // outpus 45 as output

parseFloat() method

parseFloat is inbuilt method accepts a number in string format and convert to 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 valid numeric value or null or undefined.

Syntax is

parseFloat(string, radix)

console.log(parseFloat('32.32')) // outpus 32.32 as output

This method is useful for converting to floating numbers which contains decimal places

Number() method

Number() constructor takes a string as a parameter and returns number as output

console.log(Number('12')) // outpus 12 as output
console.log(Number('null')) // outpus NaN as output
console.log(Number('undefined')) // outpus NaN as output

plus unary operator

This is a unary operator which accepts only one operand. This accepts strings, boolean values and all type of numbers and converts 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 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 very 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 string with numbers for conversion, In this way,  It is a very easy way to parse to numbers.

Reference

• Typescript Inbuilt Types