How to convert string to number in TypeScript?

The string and number are both primitive data types in TypeScript. Sometimes, we get the number in the string format, and we need to convert the string values to the number to perform mathematical operations on the value. If we perform the mathematical operation on the string values, it gives weird results. For example, adding another number value to the string of numbers appends the number to the string rather than adding.

We will learn to convert strings to numeric values using various methods and approaches in TypeScript.

So, we require to convert the string to a number in TypeScript.

Use the ‘+’ unary operator

The unary operator takes a single operand. Before evaluating an operand, it converts the operand to the number value. So, we can use it to convert strings to numeric values.

Syntax

Users can follow the syntax below to convert the string to a number value.

let numberValue: number = +stringNmber;

In the above syntax, we have used the stringNumber variable as an operand of the unary ‘+’ operator.

Example

In this example, the stringNumber variable contains the number value in the string format. Afterward, we used the unary ‘+’ operator to convert the stringNumber string value to the number and stored the evaluated value in the numberValue variable to the number data type.

In the output, users can observe that type of the numberValue variable is number.

let stringNmber: string = "124354656";
let numberValue: number = +stringNmber;

console.log("The type of numberValue variable is " + typeof numberValue);
console.log("The value of the numberValue variable is " + numberValue);

On compiling, it will generate the following JavaScript code −

var stringNmber = "124354656";
var numberValue = +stringNmber;

console.log("The type of numberValue variable is " + typeof numberValue);
console.log("The value of the numberValue variable is " + numberValue);

Output 

The above code will produce the following output –

The type of numberValue variable is number
The value of the numberValue variable is 124354656

Use the Number() constructor

A Number is an object in TypeScript, and we can use it as a constructor to create an instance of the Number object.

We can pass a number value as a Nuber() constructor parameter in the number or string format.

Syntax

Users can follow the syntax below to use the Number() constructor to convert the string to the number value.

let num: number = Number(str);

In the above syntax, we have passed the number value in the string format as a parameter of the Number() constructor.

Example

In this example, we have created the string1 and string2 variables containing the number values in the string format. After that, we converted both variables to numbers using the Number() constructor and stored them in the number1 and number2 variables.

After converting the string values to the numbers, users can observe their type in the output.

let string1: string = "35161";
let string2: string = "65986132302";

let number1: number = Number(string1);
let number2: number = Number(string2);

console.log("The value of number1 is " + number1);
console.log("The type of number1 is " + typeof number1);

console.log("The value of number2 is " + number2);
console.log("The type of number2 is " + typeof number2);

On compiling, it will generate the following JavaScript code −

var string1 = "35161";
var string2 = "65986132302";
var number1 = Number(string1);
var number2 = Number(string2);

console.log("The value of number1 is " + number1);
console.log("The type of number1 is " + typeof number1);
console.log("The value of number2 is " + number2);
console.log("The type of number2 is " + typeof number2);

Output 

The above code will produce the following output –

The value of number1 is 35161
The type of number1 is number

The value of number2 is 65986132302
The type of number2 is number

Use parseInt() method

The parseInt() method of TypeScript extracts the integer value from the number’s string or the number itself, removing the decimal part of the number.

Syntax

Users can follow the syntax below to convert the string to a number using the parseInt() method in TypeScript.

let num: number = parseInt(str);

In the above syntax, we have passed the number value in the string format as a parseInt() method parameter.

Example

In the example below, the convertNumToString() function converts the string to a number and returns the number value. In the function, we have used the parseInt() method to extract the number from the string.

We have invoked the convertNumToString() function two times by passing different numbers in the string format as an argument, and users can observe converted number values in the output.

let stringNumber: string = "12234567998";
let stringNumber2: string = "34345465.4333";

function convertNumToString(str: string) {
  let num: number = parseInt(str);
  return num;
}

console.log(
  "After converting the " +
    stringNumber +
    " to number value is " +
    convertNumToString(stringNumber)
);

console.log(
  "After converting the " +
    stringNumber2 +
    " to number value is " +
    convertNumToString(stringNumber2)
);

On compiling, it will generate the following JavaScript code −

var stringNumber = "12234567998";
var stringNumber2 = "34345465.4333";
function convertNumToString(str) {
   var num = parseInt(str);
   return num;
}
console.log("After converting the " +
   stringNumber +
   " to number value is " +
   convertNumToString(stringNumber));
console.log("After converting the " +
   stringNumber2 +
   " to number value is " +
   convertNumToString(stringNumber2));

Output 

The above code will produce the following output –

After converting the 12234567998 to number value is 12234567998
After converting the 34345465.4333 to number value is 34345465

Use the parseFlot() method

The parseFloat() method does the same work as the parseInt() method to convert the string to a number. The only difference is that it doesn’t remove the values after the decimal point, which means it extracts the float number value from the string, whereas the parseInt () method extracts the integer value from the string.

Syntax

Users can follow the syntax below to use the parseFloat() method to convert string to number.

let numberValue: number = parseFloat(stringValue);

In the above syntax, stringValue is a float number in the string format.

Example

In the example below, the stringToFloat() function demonstrates to use of the parseFloat() method to extract the float number value from the given string. We have invoked the stringToFloat() function three times.

We have passed the string with the number and other characters as an argument of the stringToFloat() function while invoking it for the third time. In the output, we can see that it removes the characters from the string and extracts the float number value only.

let strFloat: string = "34356757";
let strFloat2: string = "7867.465546";

function stringToFloat(stringValue: string) {
  let numberValue: number = parseFloat(stringValue);
  console.log(
    "The " +
      stringValue +
      " value after converting to the number is " +
      numberValue
  );
}

stringToFloat(strFloat);
stringToFloat(strFloat2);
stringToFloat("232343.43434fd");

On compiling, it will generate the following JavaScript code −

var strFloat = "34356757";
var strFloat2 = "7867.465546";
function stringToFloat(stringValue) {
    var numberValue = parseFloat(stringValue);
    console.log("The " +
        stringValue +
        " value after converting to the number is " +
        numberValue);
}
stringToFloat(strFloat);
stringToFloat(strFloat2);
stringToFloat("232343.43434fd");

Output 

The above code will produce the following output –

The 34356757 value after converting to the number is 34356757
The 7867.465546 value after converting to the number is 7867.465546
The 232343.43434fd value after converting to the number is 232343.43434

In this tutorial, users learned the four methods to convert the number value given in string format to the actual number. The best way to convert string to number is using the unary operator, which is more time efficient than other operators. However, users can also use the Number() constructor.