From 162a7ceea340e105db896bff0df8b10814fb4781 Mon Sep 17 00:00:00 2001 From: jbranchaud Date: Fri, 11 Apr 2025 17:47:33 -0500 Subject: [PATCH] Add Format A List Of Items By Locale as a JavaScript TIL --- README.md | 3 +- .../format-a-list-of-items-by-locale.md | 42 +++++++++++++++++++ 2 files changed, 44 insertions(+), 1 deletion(-) create mode 100644 javascript/format-a-list-of-items-by-locale.md diff --git a/README.md b/README.md index 775824c..a140147 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ pairing with smart people at Hashrocket. For a steady stream of TILs, [sign up for my newsletter](https://crafty-builder-6996.ck.page/e169c61186). -_1636 TILs and counting..._ +_1637 TILs and counting..._ See some of the other learning resources I work on: - [Ruby Operator Lookup](https://www.visualmode.dev/ruby-operators) @@ -556,6 +556,7 @@ If you've learned something here, support my efforts writing daily TILs by - [Find Where Yarn Is Installing Binaries](javascript/find-where-yarn-is-installing-binaries.md) - [for...in Iterates Over Object Properties](javascript/for-in-iterates-over-object-properties.md) - [Format A Decimal To A Fixed Number Of Digits](javascript/format-a-decimal-to-a-fixed-number-of-digits.md) +- [Format A List Of Items By Locale](javascript/format-a-list-of-items-by-locale.md) - [Format Time Zone Identifier](javascript/format-time-zone-identifier.md) - [Formatting Values With Units For Display](javascript/formatting-values-with-units-for-display.md) - [Freeze An Object, Sorta](javascript/freeze-an-object-sorta.md) diff --git a/javascript/format-a-list-of-items-by-locale.md b/javascript/format-a-list-of-items-by-locale.md new file mode 100644 index 0000000..a8681ab --- /dev/null +++ b/javascript/format-a-list-of-items-by-locale.md @@ -0,0 +1,42 @@ +# Format A List Of Items By Locale + +The `Intl` module includes a [`ListFormat` +object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat) +which can be used to format a list of items in a consistent way across locales. + +I've reinvented the wheel of writing a helper function numerous times across +projects for formatting a list of items that accounts for formatting based on +how many items there are. This built-in function handles that with the added +benefit of working across locales. + +Here are lists of three, two, and one items formatted in the `long` styles for +US english. + +```javascript +> const formatter = new Intl.ListFormat('en', { style: 'long', type: 'conjunction' }); +undefined + +> formatter.format(['Alice', 'Bob', 'Carla']) +'Alice, Bob, and Carla' + +> formatter.format(['Coffee', 'Tea']) +'Coffee and Tea' + +> formatter.format(['Taco']) +'Taco' +``` + +The difference between `long` and `short` style for a `conjunction` is _and_ +versus _&_. In addition to the type`conjunction`, you could also use +`disjunction` which will do an _or_ instead of an _and_. I'm not sure what +you'd use the `unit` type for. + +You could use another locale, such as French, as well: + +```javascript +> const formatter = new Intl.ListFormat('fr', { style: 'long', type: 'conjunction' }); +undefined + +> formatter.format(['café', 'thé']) +'café et thé' +```