One of my favorite things about working on projects to blog about it is when I get random offshoot ideas for posts while working on the code. That's exactly what happened yesterday. I was playing around with another idea I had and randomly discovered something cool I thought I'd share. I've long been a fan of the object in JavaScript. It's an incredibly useful and powerful way to handle date and number formatting without relying on external libraries. While I've known about, and have used, Intl for years, I was absolutely pleased to find a feature I didn't know about. other Intl A few years ago (holy crap, make that years ago), I wrote up an example of using . In that , I used Jasmine to test a function that wrote large numbers in an easier-to-read shorthand format. So for example, given , it would write it as . Yes, it's not as precise, but it's much quicker to scan and (hopefully) easier to wrap your head around if looking at a large number of stats. (As an aside, if using this in HTML, you could always use a title attribute to show the 'real' value: .) eleven Jasmine blog post 341,941,776 342M <span title="3232">3K</span> Turns out, Intl has this support baked in if you pass the option. This option supports four values: (the default), (for scientific formatting), (according to the docs, "return the exponent of ten when divisible by three", which seems weird to me), and , the one we want to look at today. For a complete list of all the options supported, you can always check the . notation standard scientific engineering compact MDN docs Let's take a look at this in action. First, I'll define an array of numbers to use as tests: let inputs = [
  999,
  1000,
  2999,
  12_499,
  12_500,
  430912,
  9_123_456,
  1_111_111_111,
  81_343_902_530,
  1_111_111_111_111,
  62_123_456_789_011,
  1_111_111_111_111_111,
]; Notice on the larger numbers, I use underscores to represent commas. This is a new feature called 'Numeric separators' that improves readability. This is well supported, except for IE, but IE is dead so we're fine with that. For each number, I can generate the formatted version of it like so: let result = new Intl.NumberFormat('en-US', 
	{ notation:'compact' }).format(i); I've hard-coded it to , but that could be dynamic of course. Given my inputs, the results are pretty much what you would expect I think. en-US https://codepen.io/cfjedimaster/pen/OJwRQgN?embedable=true For the most part, I think this works as expected, but note the rounding on the items lower than 100K. I can see people not being happy with that. Also note what happens when you get to quadrillion - Intl simply returns thousands of trillions. That may or may not be a big deal to you. (And I'll note, this is what my original blog post was supposed to be about, I hope to get back to that soon!) Let's return back to the issue I mentioned about rounding. If you would prefer a bit more specificity in the smaller numbers, you can use another feature of Intl, . According to the , this lets you set a max size for significant digits, from 1 to 21, defaulting to 21. Here's an example: maximumSignificantDigits docs let result = new Intl.NumberFormat('en-US', 
	{ notation:'compact', maximumSignificantDigits: 3}).format(i); I forked my CodePen to show the difference with this in use: https://codepen.io/cfjedimaster/pen/WNKGMMO?embedable=true For no real reason I can explain, this "feels" a bit better to me. Enjoy! Also published . here

A Simple Web Component for Building a Slideshow

How to Dynamically Hide and Show Slot Content in a Web Component

My Blog

Short Number Formatting With Intl

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

A Cat-Centric Guide to Using Web Components in Alpine.js

104 Stories To Learn About Go

105 Stories To Learn About Functional Programming

100+ Free Pluralsight Courses to learn Python, Java, and Spring Boot

10 Websites to Learn JavaScript for Beginners

A Cat-Centric Guide to Using Web Components in Alpine.js

104 Stories To Learn About Go

105 Stories To Learn About Functional Programming

100+ Free Pluralsight Courses to learn Python, Java, and Spring Boot

10 Websites to Learn JavaScript for Beginners

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps