Photo by Geronimo Giqueaux on Unsplash
While building a global eCommerce site we need to take care of price presentation in all possible currency, how you would covert 12345678
string to $12,345,678.00 (USD)
or ₹12,345,678.00 (INR)
? 🧐
Before going ahead, I would like to welcome you in a new episode of series call Javascript Useful Snippets. In this series, I'm sharing some shortcodes and useful functions that can let you make your code faster and neat. So, if you haven't read my previous episodes articles please check it out here or else stay tuned till the end to learn something new 😋 .
Now, Guess we have some numbers and want to show it in US/UK/EU currency in our view. toCurrency() function is good for the job, well this function will take Number, Currency Code, Langauge Code (if you want to convert it into any particular language) as parameter's arguments and return your desired currency. Now, Let me share you a snippet now:-
const toCurrency = (number, currency, language = undefined) =>
Intl.NumberFormat(language, { style: 'currency', currency: currency }).format(number);
As I mentioned, I've taken number, currency, and language ( set it undefined as default ) and in return, I've used Intl.NumberFormat to format-number (for your info - this function has a verity of facility and format to convert number read more on). Here, as the first argument, I've passed language if given or else undefined. and in the second argument passed an object with different options. For currency, I've passed 'currency' as the style and currency code as currency. And once initialize has done I've used format method and gave a number to it.
how to use toCurrency() function?
toCurrency(123456.789, 'EUR'); // €123,456.79 | currency: Euro | language: Local
toCurrency(123456.789, 'USD', 'en-us'); // $123,456.79 | currency: US Dollar | language: English (United States)
toCurrency(123456.789, 'USD', 'fa'); // ۱۲۳٬۴۵۶٫۷۹ $ | currency: US Dollar | language: Farsi
toCurrency(322342436423.2435, 'JPY'); // ¥322,342,436,423 | currency: Japanese Yen | language: Local
toCurrency(322342436423.2435, 'JPY', 'fi'); // 322 342 436 423 ¥ | currency: Japanese Yen | language: Finnish
As you see, in the first result I've not sent any language so it set as a local language. Then on the third result, I've passed 'fa'(for Farsi) it converted into Farsi language. And with that, if you see in all results, output contained symbol respective to a given code because we set currency as a style in our function's option. Same as that, there is a bunch of more options available to modify your NumberObject ( you can check it from here )
I wanted to present the number in different currency formats, at first I tried third-party libraries. But then I found this amazing function which turned into a snippet for my app. And it's really working like charm. So, I thought to share it with you guys too. I hope you liked ( if yes, hit like ❤️ button ) it and you learn something new. If yes, hit follow to learn something new every day 😅.