i

JavaScript Formatters

JavaScript has some excellent formatters in its newer APIs - they're starting to creep into StackOverflow answers, but check these out if you haven't seen them before!

Formatting Numbers

Want to display a numerical value in a more human-readable format? Use Number.prototype.toLocaleString().

numbers.js
javascript
const value = 1000000;
console.log(value.toLocaleString());
// => "1,000,000"

If you're using numbers with units or currencies, Intl.NumberFormat has you covered.

currency.js
javascript
const base = 165000;
const amount = 195000;
 
new Intl.NumberFormat("en-US", {
	style: "currency",
	currency: "USD",
	currencySign: "accounting",
}).format(base - amount);
// => "($30,000.00)"
 
new Intl.NumberFormat("en-US", {
	style: "percent",
	signDisplay: "exceptZero",
}).format(base / amount);
// => "+85%"

If you want to get the ordinals, you can use NumberFormat with PluralRules

ordinals.js
typescript
const rules = new Intl.PluralRules("en-us", { type: "ordinal" });
const formatter = new Intl.NumberFormat("en-us");
 
function format(num: number) {
	const rule = rules.select(num);
	let suffix;
 
	switch (rule) {
		case "zero":
			break;
		case "one":
			suffix = "st";
			break;
		case "two":
			suffix = "nd";
			break;
		case "few":
			suffix = "rd";
			break;
		case "many":
		case "other":
		default:
			suffix = "th";
			break;
	}
 
	return `${formatter.format(num)}${suffix}`;
}
 
format(1);
// "1st"
format(2);
// "2nd"
format(3);
// "3rd"
format(10);
// "10th"
format(100124);
// "100,134th"

Formatting Lists

Want to format a list of options in a readable format? Rails had a great implmentation with humanize, and now JavaScript does too! Check out Intl.ListFormat.

humanize.js
javascript
const formatter = new Intl.ListFormat("en", {
	style: "long",
	type: "conjunction",
});
 
console.log(
	formatter.format(["Soccer", "Politics", "Video Games", "Programming"]),
);
// => "Soccer, Politics, Video Games, and Programming"

It even uses the Oxford Comma!

Formatting Dates

Unfortunately, the Date API doesn't do well formatting time or durations - but the good news is that the new Temporal API does! The spec has a fantastic section on formatting. There are a few polyfills available, so you can use Temporal today if you want.