HiveBrain v1.2.0
Get Started
← Back to all entries
snippetjavascriptTip

Join a JavaScript array into a string, with locale-sensitive separators

Submitted by: @import:30-seconds-of-code··
0
Viewed 0 times
javascriptseparatorsintosensitivejoinwithlocalearraystring

Problem

Array.prototype.join() is the tool most developers would reach in order to join an array into a string. However, it has some limitations, such as the inability to use different separators for the last item. Luckily, there's a new kid on the block - Intl.ListFormat - which can help us with that.
Using the Intl.ListFormat() constructor, we can create more versatile formatters, allowing us to specify the grouping type (e.g. conjunction or disjunction) and the style of the list (e.g. long, short or narrow). The format() method of the formatter can then be used to join an array into a string, with the appropriate separators.
> [!NOTE]
>
> As shown in the examples, the 'en-US' locale uses the Oxford comma, while the 'en-GB' locale doesn't.

Solution

const formatList = (arr, locale, type, style) =>
  new Intl.ListFormat(locale, { type, style }).format(arr);

formatList(['foo', 'bar', 'baz'], 'en-US', 'conjunction', 'short');
// 'foo, bar, & baz'
formatList(['foo', 'bar', 'baz'], 'en-US', 'conjunction', 'long');
// 'foo, bar, and baz'
formatList(['foo', 'bar', 'baz'], 'en-GB', 'conjunction', 'long');
// 'foo, bar and baz'
formatList(['foo', 'bar', 'baz'], 'en-US', 'disjunction', 'long');
// 'foo, bar, or baz'


> [!NOTE]
>
> As shown in the examples, the 'en-US' locale uses the Oxford comma, while the 'en-GB' locale doesn't.

Code Snippets

const formatList = (arr, locale, type, style) =>
  new Intl.ListFormat(locale, { type, style }).format(arr);

formatList(['foo', 'bar', 'baz'], 'en-US', 'conjunction', 'short');
// 'foo, bar, & baz'
formatList(['foo', 'bar', 'baz'], 'en-US', 'conjunction', 'long');
// 'foo, bar, and baz'
formatList(['foo', 'bar', 'baz'], 'en-GB', 'conjunction', 'long');
// 'foo, bar and baz'
formatList(['foo', 'bar', 'baz'], 'en-US', 'disjunction', 'long');
// 'foo, bar, or baz'

Context

From 30-seconds-of-code: join-array-into-string

Revisions (0)

No revisions yet.