Presenting numbers in a readable format takes many forms, from visual charts to simply adding punctuation. Those punctuation, however, are different based on internationalization. Some countries use ,
for decimal, while others use .
. Worried about having to code for all this madness? Don’t — JavaScript provides a method do the hard work for you!
The Number
primitive has a toLocaleString
method to do the basic formatting for you:
const price = 16601.91; // Basic decimal format, no providing locale // Uses locale provided by browser since none defined price.toLocaleString(); // "16,601.91" // Provide a specific locale price.toLocaleString('de-DE'); // "16.601,91" // Formatting currency is possible price.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' }); // "16.601,91 €" // You can also use Intl.NumberFormat for formatting new Intl.NumberFormat('en-US', { style: 'currency', currency: 'GBP' }).format(price); // £16,601.91
It’s a major relief that JavaScript provides us these type of helpers so that we don’t need to rely on bloated third-party libraries. No excuses — the tool is there!
Being a Dev Dad
I get asked loads of questions every day but I’m always surprised that they’re rarely questions about code or even tech — many of the questions I get are more about non-dev stuff like what my office is like, what software I use, and oftentimes…
Create a CSS Cube
CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals. Add animation and you’ve got something really neat. Unfortunately each CSS cube tutorial I’ve read is a bit…
pointer Media Query
As more devices emerge and differences in device interaction are implemented, the more important good CSS code will become. In order to write good CSS, we need some indicator about device capabilities. We’ve used CSS media queries thus far, with checks for max-width and pixel ratios.
Create a Clearable TextBox with the Dojo Toolkit
Usability is a key feature when creating user interfaces; it’s all in the details. I was recently using my iPhone and it dawned on my how awesome the “x” icon is in its input elements. No holding the delete key down. No pressing it a…