As a TypeScript developer, you will face scenarios of converting strings to numbers for data manipulation, calculations, and integrations. There are various methods to do this. Let me explain. In this tutorial, I will explain how to convert a string to a number in TypeScript using different approaches with examples.
When building TypeScript applications, we often receive data from user inputs, API responses, or configuration files in string format. However, we need these values as proper number types to perform mathematical operations or comparisons. TypeScript’s static typing system helps ensure type safety, but we still need reliable conversion methods.
So, now, let me show you some useful methods ot converting strings to numbers in TypeScript.
TypeScript String to Number Conversion Methods
In TypeScript, you can use various methods to convert strings to numbers. Here are the methods with examples.
1. Using the Unary Plus (+) Operator
The unary plus operator in TypeScript is arguably the easiest way to convert a string into a number. Here is how to do this.
// Converting string to number using unary plus
const strValue: string = "42";
const numValue: number = +strValue; // 42
console.log("String Value:", strValue);
console.log("Converted Number Value:", numValue);This code takes a string ("42") and converts it into a number using the unary plus operator (+). The console.log statements help verify the conversion.
Here is the exact output in the screenshot below:
This method works well for simple conversions but has limitations when dealing with non-numeric strings or special formats.
Check out Convert String to Enum in Typescript
2. Using the Number() Constructor
The Number() constructor provides another straightforward approach to convert strings to numbers in TypeScript.
Here is the complete code:
// Using Number() constructor
const strValue: string = "123.45";
const numValue: number = Number(strValue); // 123.45
console.log("String Value:", strValue);
console.log("Converted Number Value:", numValue);This code declares a string variable strValue with the value "123.45", then converts it to a number using the Number() constructor. Finally, it logs both the original string and the converted number to the console.
I executed the above code using VS code and you can see the output in the screenshot below:
The Number() constructor handles both integers and floating-point numbers, making it versatile for various conversion needs.
Read Convert String to Date in TypeScript
3. Using parseInt() for Integer Conversion
When you specifically need an integer result, parseInt() is the recommended method in TypeScript to convert a string to an integer.
// Converting to integer with parseInt()
const strValue: string = "42.75";
const intValue: number = parseInt(strValue, 10); // 42
console.log("String Value:", strValue);
console.log("Converted Integer Value:", intValue);This code declares a string variable strValue with the value "42.75", then uses parseInt() with a radix of 10 to convert it to the integer 42. Finally, it logs both the original string and the converted integer to the console.
You can see the exact output in the screenshot below:
Note the second parameter (10) in the parseInt() function. This specifies the radix or base of the numeral system (decimal in this case). Always include this parameter to avoid potential issues with string values that start with ‘0’.
Read Convert Date to UTC in Typescript
4. Using parseFloat() for Decimal Numbers
For decimal or floating-point numbers in TypeScript, parseFloat() is the appropriate choice:
// Converting to float with parseFloat()
const strValue: string = "42.75";
const floatValue: number = parseFloat(strValue); // 42.75
console.log("String Value:", strValue);
console.log("Converted Float Value:", floatValue);This code declares a string variable strValue with the value "42.75", then converts it to a floating-point number using parseFloat(). Finally, it logs both the original string and the converted float to the console.
Unlike parseInt(), parseFloat() doesn’t require a radix parameter and always interprets the input in base 10.
Compare the Conversion Methods
Here is the comparison table you can follow to find out which method suits your requirements.
| Method | Handles Decimals | Returns NaN for Invalid Input | Handles Leading/Trailing Spaces | Notes |
|---|---|---|---|---|
| Unary Plus (+) | Yes | Yes | No | Most concise syntax |
| Number() | Yes | Yes | Yes | Converts empty strings to 0 |
| parseInt() | No (truncates) | Yes | Yes | Requires radix parameter |
| parseFloat() | Yes | Yes | Yes | Stops at invalid characters |
Read Convert Date to String Format dd/mm/yyyy in Typescript
Handle Edge Cases in String to Number Conversion
Converting strings to numbers isn’t always straightforward. Let’s examine how to handle common edge cases:
Working with Non-Numeric Strings
When converting strings that aren’t valid numbers, all methods will return NaN (Not a Number):
const nonNumeric: string = "Hello";
console.log(+nonNumeric); // NaN
console.log(Number(nonNumeric)); // NaN
console.log(parseInt(nonNumeric, 10)); // NaN
console.log(parseFloat(nonNumeric)); // NaN<