3 Ways To Format Number As Currency String In Javascript

Welcome to a quick tutorial on how to format a number as a currency string in Javascript. Need to display a number in a “nice currency format” after some calculations?

That covers the quick basics, but read on for detailed examples!

 

 

TLDR – QUICK SLIDES

[web_stories_embed url=”https://code-boxx.com/web-stories/format-number-as-currency-string-in-javascript/” title=”Format Number As Currency String In Javascript” poster=”https://code-boxx.com/wp-content/uploads/2021/11/STORY-JS-20230518.webp” width=”360″ height=”600″ align=”center”]

Fullscreen Mode – Click Here

 

TABLE OF CONTENTS

 

 

 

METHOD 1) NUMBER FORMAT

// (A) THE NUMBER
var amount = 123456;

// (B) TO USD - $123,456.00
var usd = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD"
}).format(amount);
console.log(usd);

// (C) TO JPY - ¥123,456
var jpy = new Intl.NumberFormat("jp-JP", {
  style: "currency",
  currency: "JPY"
}).format(amount);
console.log(jpy);

// (D) EURO - €123,456.00
var eur = new Intl.NumberFormat("en-GB", {
  style: "currency",
  currency: "EUR"
}).format(amount);
console.log(eur);

This is the modern and fastest way to format a currency string in Javascript. Just use Intl.NumberFormat() and Javascript will do the rest of the formatting magic. A couple of notes here:

• The first parameter is the language code and locale. For example, en-US stands for “US English” and en-GB stands for “UK English”.
• The language code is ISO 639-1, check out Wikipedia for the full list.
• As for the locale code, ISO 3166-1 alpha-2, check out Wikipedia again.
• Lastly, ISO 4217 for the currency code, check Wikipedia yet again.

P.S. Intl.NumberFormat is well supported in most modern browsers. But if you have to work with ancient browsers, manual formatting is the only way to go.

 

 

METHOD 2) REGULAR EXPRESSION

// CREDIT: https://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript
// (A) CONVERT TO CURRENCY (DOLLARS)
function tocur (amount) {
  return "$" + amount
    .toString()
    .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

// (B) TEST
var testA = tocur(1234567),
    testB = tocur(123456.78);
console.log(testA); // $1,234,567
console.log(testB); // $123,456.78

Not going to explain regular expressions too much, that is a can of worms on its own. But in simple terms, what it does is:

• Convert the number into a string.
• Add a comma for every 3 digits (thousands separator).
• Prepend a dollar sign in front.

 

 

METHOD 3) MANUAL CURRENCY STRING

// (A) CURRENCY CONVERSION FUNCTION (DOLLARS)
function tocur (amount) {
  // (A1) NUMBER TO STRING
  var amount = amount.toString(),
      dec = ".00",
      temp = amount.indexOf(".");

  // (A2) EXTRACT DECIMALS (IF ANY)
  if (temp != -1) {
    dec = amount.substring(temp);
    amount = amount.substring(0, temp);
  }

  // (A3) ADD THOUSAND SEPARATORS
  if (amount.length>3) {
    temp = "";
    for (let i=amount.length-1, j=1; i>=0; i--, j++) {
      temp = amount[i] + temp;
      if (j%3==0 && i!=0) { temp = "," + temp; }
    }
    amount = temp;
  }

  // (A4) RESULT
  return "$" + amount + dec;
}

 // (B) TEST
var testA = tocur(1234567),
    testB = tocur(123456.78);
console.log(testA); // $1,234,567.00
console.log(testB); // $123,456.78

Lastly, this is the “hardcore old-school” way of formatting a number into a currency string. Yep, that’s how we roll in the ancient days. A little long-winded, but at least it has good backward compatibility.

 

 

 

SORRY FOR THE ADS...

But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.

Buy Me A Coffee Code Boxx eBooks

 

EXAMPLE CODE DOWNLOAD

Click here for the source code on GitHub gist, just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

COMPATIBILITY CHECKS

• Number Format – CanIUse

 

LINKS & REFERENCES

• Add Comma To Numbers In Javascript – Code Boxx
• How to Format Currency in ES6 – Samantha Ming

 

INFOGRAPHIC CHEAT SHEET