As a TypeScript developer, I recently encountered a scenario in which user input is received as a string but needs to be processed as a number. This is very common while developing web applications. In this tutorial, I will explain how to convert a string to a number in TypeScript using different methods with examples.
Methods to Convert String to Number in TypeScript
TypeScript provides various methods to convert strings to numbers. Let me show you each method with examples.
1. Using the Number Constructor
The Number constructor is a simple way to convert a string to a number in TypeScript.
let str: string = "1234";
let num: number = Number(str);
console.log(num); // Output: 1234This method is useful for converting strings that represent whole numbers or floating-point numbers. However, it returns NaN (Not-a-Number) if the string cannot be converted to a valid number.
I executed the above TypeScript code using VS code and you can see the exact output in the screenshot below:
Read How to Convert a String to Boolean in TypeScript?
2. Using parseInt()
The parseInt() function parses a string argument and returns an integer of the specified radix (the base in mathematical numeral systems).
let str: string = "5678";
let num: number = parseInt(str, 10);
console.log(num); // Output: 5678In this example, the second argument 10 specifies the base 10 numeral system, which is commonly used. parseInt() is particularly useful when you want to convert a string to an integer and ignore any decimal part.
Here is the exact output in the screenshot below:
Check out Check if a String Contains a Substring in TypeScript
3. Using parseFloat()
The parseFloat() function parses a string argument and returns a floating-point number.
Here is the TypeScript code.
let str: string = "1234.56";
let num: number = parseFloat(str);
console.log(num); // Output: 1234.56This method is ideal for converting strings that represent floating-point numbers.
4. Using the Unary Plus Operator (+)
The unary plus operator (+) is a concise way to convert a string to a number in TypeScript. It attempts to convert the operand to a number.
let str: string = "7890";
let num: number = +str;
console.log(num); // Output: 7890This method is quick and works well for both integers and floating-point numbers.
5. Using Math.floor(), Math.ceil(), and Math.round()
These methods can also be used to convert strings to numbers, particularly when you need to round the number.
let str: string = "3456.78";
let numFloor: number = Math.floor(Number(str));
let numCeil: number = Math.ceil(Number(str));
let numRound: number = Math.round(Number(str));
console.log(numFloor); // Output: 3456
console.log(numCeil); // Output: 3457
console.log(numRound); // Output: 3457Handle Edge Cases
It’s essential to handle cases where the string might not be a valid number in TypeScript. For instance, if the string contains non-numeric characters, the conversion methods will return NaN.
let str: string = "abc123";
let num: number = Number(str);
console.log(num); // Output: NaNTo handle such cases, you can use the isNaN() function to check if the result is NaN.
let str: string = "abc123";
let num: number = Number(str);
if (isNaN(num)) {
console.log("The string is not a valid number");
} else {
console.log(num);
}Convert String to Number in TypeScript: Practical Examples
Now, let me show you some practical, real-world examples of when we need to convert strings to integers in TypeScript.
Example 1: Calculating Sales Tax
Imagine you are building an e-commerce application for a store in New York. You need to calculate the sales tax based on the user’s input, which is received as a string.
function calculateSalesTax(priceStr: string, taxRate: string): number {
let price: number = parseFloat(priceStr);
let tax: number = parseFloat(taxRate);
if (isNaN(price) || isNaN(tax)) {
throw new Error("Invalid input");
}
return price * (1 + tax / 100);
}
let priceStr: string = "100.50";
let taxRate: string = "8.875"; // New York sales tax rate
let total: number = calculateSalesTax(priceStr, taxRate);
console.log(total); // Output: 109.43Example 2: User Age Verification
Suppose you are developing a membership registration form for a gym in Los Angeles. You need to ensure that the user’s age input is a number and meets the minimum age requirement.
function isEligibleForMembership(ageStr: string): boolean {
let age: number = parseInt(ageStr, 10);
if (isNaN(age)) {
throw new Error("Invalid age input");
}
return age >= 18;
}
let ageStr: string = "21";
let isEligible: boolean = isEligibleForMembership(ageStr);
console.log(isEligible); // Output: trueExample 3: Calculating Discounts
For a retail store in Chicago, you might want to calculate the discounted price based on a user’s input.
function calculateDiscountedPrice(priceStr: string, discountStr: string): number {
let price: number = Number(priceStr);
let discount: number = Number(discountStr);
if (isNaN(price) || isNaN(discount)) {
throw new Error("Invalid input");
}
return price * (1 - discount / 100);
}
let priceStr: string = "200";
let discountStr: string = "15"; // 15% discount
let discountedPrice: number = calculateDiscountedPrice(priceStr, discountStr);
console.log(discountedPrice); // Output: 170Conclusion
In this tutorial, I have explained different methods to convert a string to a number in TypeScript with examples, such as:
- Using the Number Constructor
- Using parseInt()
- Using parseFloat()
- Using the Unary Plus Operator (+)
- Using Math.floor(), Math.ceil(), and Math.round()
You may also like:
I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.
