How to Convert Number to/from String in typescript?

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.

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:

• Typescript Inbuilt Types