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 nicely display an amount in your web app after the calculations?

The easy ways to format a number as a currency string in Javascript are:

  1. Use the native number format object.
    • var amount = 12345;
    • var usd = new Intl.NumberFormat("en-US", { style: "currency", "currency":"USD" });
  2. Use regular expressions.
    • var amount = 54321;
    • amount = "$" + amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");

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

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes To Currency Useful Bits & Links
The End

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

EXAMPLE CODE DOWNLOAD

Click here to download all the example source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

QUICK NOTES

If you spot a bug, please feel free to comment below. I try to answer questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

 

NUMBER TO CURRENCY

All right, let us now get into the examples of converting a number into a currency in Javascript.

 

1) NUMBER FORMAT

1-num-format.html
 // (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:

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.

 

 

2) REGULAR EXPRESSION

2-regular-expression.html
// 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 is does is:

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

 

 

3) MANUAL CURRENCY STRING

3-manual-string.html
// (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 = "";
    var j = 0;
    for (var i=amount.length-1; i>=0; i--) {
      temp = amount[i] + temp;
      j++;
      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.

 

 

USEFUL BITS & LINKS

That’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.

 

LINKS & REFERENCES

 

INFOGRAPHIC CHEAT SHEET

Javascript Format Numbers As Currency (click to enlarge)

 

THE END

Thank you for reading, and we have come to the end. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published. Required fields are marked *