When you wish to have to show an inventory of things to a person, I am afraid .sign up for(', ')
simply would possibly not minimize it:

console.log(['apple'].sign up for(', ')) // apple
// appears to be like just right
console.log(['apple', 'grape'].sign up for(', ')) // apple, grape
// nah, I need "apple and grape"
console.log(['apple', 'grape', 'pear'].sign up for(', ')) // apple, grape, pear
// wut?

Adequate, so bust out your string concat talents proper? That is what I did… however
holdup, there is a higher method:

Have you ever heard of
Intl.ListFormat?
Neatly, it is most likely that this will do all you want and extra. Let’s have a look:

const pieces = [
  'Sojourner',
  'Opportunity',
  'Spirit',
  'Curiosity',
  'Perseverance',
]

const formatter = new Intl.ListFormat('en', {
  taste: 'lengthy',
  kind: 'conjunction',
})
console.log(formatter.structure(pieces))
// logs: "Sojourner, Alternative, Spirit, Interest, and Perseverance"

The cool factor about that is that as a result of it is coming from the Intl usual,
a TON of locales are supported, so you’ll be able to get internationalization for “loose”.

The primary argument to the ListFormat constructor is the locale (we are the usage of
'en' above for “English”). The second one argument is the choices of taste and
kind. The taste possibility can also be one in every of 'lengthy', 'quick', or 'slim'. The
kind can also be one in every of 'conjunction', 'disjunction', or 'unit'.

With the record above, this is all of the mixture of the ones (with en because the
locale):

Apparently, if we mess around with the locale, issues behave rapidly:

new Intl.ListFormat('en', {taste: 'slim', kind: 'unit'}).structure(pieces)
// Sojourner Alternative Spirit Interest Perseverance

new Intl.ListFormat('es', {taste: 'slim', kind: 'unit'}).structure(pieces)
// Sojourner Alternative Spirit Interest Perseverance

new Intl.ListFormat('de', {taste: 'slim', kind: 'unit'}).structure(pieces)
// Sojourner, Alternative, Spirit, Interest und Perseverance

Most likely German audio system can transparent up for us why the mix of slim and unit
for de behaves extra like lengthy and conjunction as a result of I do not know.

There may be additionally a lesser-known localeMatcher possibility which can also be configured to
both 'look up' or 'absolute best are compatible' (defaults to 'absolute best are compatible'). So far as I will
inform from
mdn,
its function is to inform the browser how you can decide which locale to make use of in line with
the only given within the constructor. In my very own checking out I used to be not able to decide a
distinction in capability switching between those choices 🤷‍♂️

Frankly, I feel it is generally higher to accept as true with the browser on stuff like this
slightly than write what the browser provides. It’s because the longer I spend
time writing device, the extra I to find that issues are infrequently so simple as we
assume they are going to be (particularly in relation to internationalization). However there
are no doubt occasions the place the platform comes up quick and you’ll be able to’t slightly do
what you are looking to do. That is when it is sensible to do it your self.

So I put in combination slightly serve as that suited my use case beautiful neatly, and I
wish to proportion it with you. Prior to I do, I wish to be transparent that I did do this
with out cut back (the usage of a for loop) and I feel the cut back means used to be significantly
more effective. Be happy to take a whack on the for loop model even though if you wish to have.

serve as listify(
  array,
  {conjunction = 'and ', stringify = merchandise => merchandise.toString()} = {},
) {
  go back array.cut back((record, merchandise, index) => {
    if (index === 0) go back stringify(merchandise)
    if (index === array.period - 1) {
      if (index === 1) go back `${record} ${conjunction}${stringify(merchandise)}`
      else go back `${record}, ${conjunction}${stringify(merchandise)}`
    }
    go back `${record}, ${stringify(merchandise)}`
  }, '')
}

In my codebase, is used like so:

const to = `To: ${listify(mentionedMembersNicknames)}`
// and
const didYouMean = `Did you imply ${listify(closeMatches, {
  conjunction: 'or ',
})}?`

I would make the effort to stroll thru this code with you, however if truth be told as I used to be
scripting this put up, I noticed that my use case wasn’t as particular as I believed
it used to be and I attempted rewriting this to make use of Intl.ListFormat and would not you already know
it, with a small trade to the API, I used to be ready to make a more effective implementation
on best of the usual:

serve as listify(
  array,
  {
    kind = 'conjunction',
    taste = 'lengthy',
    stringify = merchandise => merchandise.toString(),
  } = {},
) {
  const stringified = array.map(merchandise => stringify(merchandise))
  const formatter = new Intl.ListFormat('en', {taste, kind})
  go back formatter.structure(stringified)
}

With that, now I do that:

// no trade for the default case
const to = `To: ${listify(mentionedMembersNicknames)}`
// transfer to the usage of the "kind" possibility slightly than overloading/abusing the time period "conjunction"
const didYouMean = `Did you imply ${listify(closeMatches, {
  kind: 'disjunction',
})}?`

So it simply is going to turn you that you just would possibly be doing a little further paintings that you just
would possibly now not wish to be doing. The platform most probably does this for you
mechanically! Oh, and only for amusing, here is a TypeScript model of that
completed code (I am within the means of migrating this undertaking to TypeScript).

// sadly TypeScript does not have Intl.ListFormat but 😢
// so we will simply upload it ourselves:
kind ListFormatOptions =  'quick' 
claim namespace Intl {
  elegance ListFormat {
    constructor(locale: string, choices: ListFormatOptions)
    public structure: (pieces: Array<string>) => string
  }
}

kind ListifyOptions<ItemType> = {
  kind?: ListFormatOptions['type']
  taste?: ListFormatOptions['style']
  stringify?: (merchandise: ItemType) => string
}
serve as listify<ItemType>(
  array: Array<ItemType>,
  {
    kind = 'conjunction',
    taste = 'lengthy',
    stringify = (factor: {toString(): string}) => factor.toString(),
  }: ListifyOptions<ItemType> = {},
) {
  const stringified = array.map(merchandise => stringify(merchandise))
  const formatter = new Intl.ListFormat('en', {taste, kind})
  go back formatter.structure(stringified)
}

And now we get candy autocomplete for the ones choices and kind checking on that
stringify means. Great!

Oh, through the way in which, you can all the time wish to double-check browser improve for no matter
you might be the usage of. There may be caniuse.com and
the MDN article on Intl.ListFormat
additionally has
a chart.

I’m hoping that used to be attention-grabbing and helpful to you!