mirror of
https://github.com/jbranchaud/til
synced 2026-01-03 07:08:01 +00:00
Add Format A List Of Items By Locale as a JavaScript TIL
This commit is contained in:
@@ -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).
|
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:
|
See some of the other learning resources I work on:
|
||||||
- [Ruby Operator Lookup](https://www.visualmode.dev/ruby-operators)
|
- [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)
|
- [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)
|
- [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 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)
|
- [Format Time Zone Identifier](javascript/format-time-zone-identifier.md)
|
||||||
- [Formatting Values With Units For Display](javascript/formatting-values-with-units-for-display.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)
|
- [Freeze An Object, Sorta](javascript/freeze-an-object-sorta.md)
|
||||||
|
|||||||
42
javascript/format-a-list-of-items-by-locale.md
Normal file
42
javascript/format-a-list-of-items-by-locale.md
Normal file
@@ -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é'
|
||||||
|
```
|
||||||
Reference in New Issue
Block a user