JavaScript: Number Formatting

Hello.

Let's do a bit of JavaScript.

"Number Formatting" I mean in the title is as such:

• 100 is formatted to 100
• 1000 is formatted to 1,000
• 10000 is formatted to 10,000
• 123456 is formatted to 123,456
• 9876543210 is formatted to 9,876,543,210
• 1123.58 is formatted to 1,123.58

By adding a comma separator every three digits.

We can achieve that through:

1. A loop.

   Using for — backwards loop.

   BUT!

   Before that, we need to separate —

   • the negative sign — if exists,
   • the digits part — this part is the subject of the formatting,
   • and the decimals part.

   Then lump everything together as the final result.

2. Power of regular expression. 💪👺💪

Let us begin.

---

Loop Method

As I've mentioned above, this has separation stages, then the loop.

You can read the comments in the code to understand the flow.

function formatNumberWithLoop( number, digitSeparator = ",", decimalSeparator = "." ) { /** * To switch between "," (digitSeparator) and "." (decimalSeparator), * make sure the "number" input is a string type. * Because 10027,25 is not a number (NaN). */ const string = number?.toString()?.replace(/[\n\r\t\s]/g, ""); if (/[^0-9.,-]/.test(string)) return number; // ↑ Err... well... You may need to do proper validation. // Separation process. const parts = string.split(decimalSeparator); let digitsPart = parts?.[0]; const decimalsPart = parts?.[1]; // Negative sign const signPart = /^-/.test(digitsPart) ? "-" : null; if (signPart) digitsPart = digitsPart.replace(/-/, ""); // Then convert the digits string to an array. const stringArray = digitsPart.split(""); // Final result array. const result = []; // Count reference. let count = 0; // Loop backwards. for (let i = stringArray.length - 1; i >= 0; i -= 1) { /** * Add "," (comma) after every 3 digits * to the beginning of "result" array, * "count % 3 === 0". * But not at the very first, the count = 0. * So, "count > 0". * Therefore, "count % 3 === 0 && count > 0". * ——————————————————————————————————————————— * Use "unshift" instead of "push" to add * an element to the beginning of an array. */ if (count % 3 === 0 && count > 0) { result.unshift(digitSeparator); } /** * Add the actual number from "stringArray" * to the beginning of "result" array. */ result.unshift(stringArray[i]); // Increment the count. count += 1; } // Final result. Merge everything. return ( (signPart ? signPart : "") + result.join("") + (decimalsPart ? decimalSeparator + decimalsPart : "") ); }

Usage examples:

console.log(formatNumberWithLoop(1200)) // → "1,200" console.log(formatNumberWithLoop(1200.24)) // → "1,200.24" console.log(formatNumberWithLoop(-1200.24)) // → "-1,200.24" console.log(formatNumberWithLoop("1200,24", ".", ",")) // → "1.200,24"

Without comments:

function formatNumberWithLoop( number, digitSeparator = ",", decimalSeparator = "." ) { const string = number?.toString()?.replace(/[\n\r\t\s]/g, ""); if (/[^0-9.,-]/.test(string)) return number; const parts = string.split(decimalSeparator); let digitsPart = parts?.[0]; const decimalsPart = parts?.[1]; const signPart = /^-/.test(digitsPart) ? "-" : null; if (signPart) digitsPart = digitsPart.replace(/-/, ""); const stringArray = digitsPart.split(""); const result = []; let count = 0; for (let i = stringArray.length - 1; i >= 0; i -= 1) { if (count % 3 === 0 && count > 0) { result.unshift(digitSeparator); } result.unshift(stringArray[i]); count += 1; } return ( (signPart ? signPart : "") + result.join("") + (decimalsPart ? decimalSeparator + decimalsPart : "") ); }

Well. 🤔 That works. Mostly.

---

Regular Expression Method

I've found a RegExp pattern specifically for this.

💪👺💪

I am Mwahahaha. Ore!

Let me break it down.

First, capturing 3-digit pattern:

\d{3}

Combine it with positive lookahead — looks ahead for groups of exactly three digits (3, 6, 9, 12 digits, etc.):

(?=(\d{3})+)

Add a pattern gate with a negative lookahead — ensures that after those groups of 3 digits, there are no more digits left. Meaning we are counting backwards from the end of the number:

(?=(\d{3})+(?!\d))

Lastly, we need a final gate to stop the RegExp from matching the very beginning of the number:

\B(?=(\d{3})+(?!\d))

⬆️ Capital \B matches a position inside a word / number (that is, between two digits). Whilst \b matches the edge of a word (word boundary).

Final RegExp pattern:

/\B(?=(\d{3})+(?!\d))/

We can then use replace method combined with that RegExp pattern — without input validation:

function formatNumberWithRegex(number) { return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); }

I do not put input validation there to emphasise how efficient the code is by employing a proper, clever regular expression. It works with negative number and decimals.

Usage examples:

console.log(formatNumberWithRegex(120)) // → "120" console.log(formatNumberWithRegex(1234.56)) // → "1,234.56" console.log(formatNumberWithRegex(-7890.12)) // → "-7,890.12" console.log(formatNumberWithRegex(-3456789.012)) // → "-3,456,789.012"

And of course, if we need to make the separator to be flexible, add another parameter to the function. As such:

function formatNumberWithRegex(number, digitSeparator = ",") { return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, digitSeparator); }

That digitSeparator. The default value is a comma (,). You can pass anything else. For instance, a period / dot (.). Make sure the number value type is a string.

Example:

console.log(formatNumberWithRegex("1234,56", ".")) // → "1.234,56"

---

Right. Let's take a moment to observe the pattern.

This brilliant RegExp pattern —

/\B(?=(\d{3})+(?!\d))/

— is a classic one. I did not come up with that.

---

How It Operates

Let's use 1234567 as an example.

1. At Position B (between 1 and 2):

   • Is it a \B? Yes, it's inside the number.
   • Looking ahead: are there groups of 3 digits all the way to the end?
   • Yes! It sees 234 and 567 followed by the end of the line.
   • Match! A comma is placed after 1 ➡️ 1,

2. At Position E (between 4 and 5):

   • Is it a \B? Yes.
   • Looking ahead: are there groups of 3 digits all the way to the end?
   • Yes! It sees 567 followed by the end of the line.
   • Match! A comma is placed after 4 ➡️ 4,
3. Result: 1,234,567

Once more to appreciate it:

/\B(?=(\d{3})+(?!\d))/

Whoever wrote that was playing chess with character boundaries. Using lookaheads to walk backwards from the end of a string while matching forwards from the front? Absolutely mental.

It's one of those bits of code where we look at it, head hurts for five minutes, and then when it clicks we go —

You absolute genius.

That's it, then. Thanks for visiting. Cheers! 👋