JavaScript – Currency Number Formatting using Intl.NumberFormat

Hi Guy’s Welcome to Proto Coders Point, In this article let’s check put how to convert number to currency format number in javascirpt using Intl.NumberFormat.

In the world web development, we make use of javascript, and if you are building any application where you want to want to format a number into a currency number format, specially when you want to show the number in a form of item price in currencies. To ensure consistent and user-friendly experience, software developers need to format numbers according to user’s locale & the currency he/she is preference. In javascript to convert normal number into currency number is simple and straightforward using `Intl.NumberFormat` object.

Video Tutorial

Introduction to Intl.NumberFormat

The Intl.NumberFormat is a Internationalization API which comes with all the web browsers, using which software developers can format number according to their needs may be in locale or currency format, It has flexiable option to customize the number in terms of how the number is displayed to the end users.

The Code – Javascript number formating in currency format with currency symbol

const price = 10000000;

console.log(Intl.NumberFormat().format(price));

console.log("US -> ", Intl.NumberFormat('en-US').format(price));
console.log("IN -> ", Intl.NumberFormat('en-IN').format(price));

console.log("US with symbol -> ", Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD'
}).format(price));

console.log("IN with symbol -> ", Intl.NumberFormat('en-IN', {
    style: 'currency',
    currency: 'INR'
}).format(price));

Let’s break down above code in part for better understanding:

1. Default Number formating: The first 2 line demonstrate the simple usage of ‘Intl.NumberFormat’. In log i have use it, it formats the price variable which is a number into currency number format using default locale.
2. Locale-Specific Formating: The next 2 line is to demostrate how to format to number for specific locales. NumberFormat() i am passing locate code i.e en-US for United States and en-IN for India.
3. Currency Number formating with Currency Symbol: The last 2 example code is to give styling for the number. The style property is set to 'currency', and the currency property is used to specify the currency symbol and code. The code formats price as US Dollars (USD) for the United States and Indian Rupees (INR) for India, including currency symbols.

Conclusion

In this article, we have explored how to use Intl.NumberFormat object in Javascript to format numbers into currency. Whether you or you company is build an e-commerce platform, financial application or any other application that requires currency number format to be displayed, Intl.NumberFormat() is your go-to solution to build user-friendly application.

Similar Article

Flutter display digits in currency format