Summary - Advanced Intl

Build a notification message generator with Intl.NumberFormat, PluralRules and ListFormat.

Summary - Advanced Intl

In this group you learned five Intl constructors:

NumberFormat: formats numbers and currency
PluralRules: returns plural category
Collator: sorts by locale
ListFormat: joins a list with conjunctions
RelativeTimeFormat: formats relative time

All take a locale string and options. In real tasks like a notification message, you combine them: NumberFormat for currency, PluralRules for plural choice, ListFormat for the list.

Exercise Plural category and list

Create an Intl.PluralRules for the 'en' locale. Create an Intl.ListFormat for the 'en' locale with type set to 'conjunction'. Assign the select(1) result to plural, and the format result of ['Mara', 'Alex'] to names.

Show example solution

1. Get the plural category with new Intl.PluralRules('en').select(1).
2. Format the list with new Intl.ListFormat('en', { type: 'conjunction' }).format(['Mara', 'Alex']).
3. Assign to plural and names.

Example solution:
const plural = new Intl.PluralRules('en').select(1);
const names = new Intl.ListFormat('en', { type: 'conjunction' }).format(['Mara', 'Alex']);

Exercise Build a notification message

Build a notification message. Create an Intl.NumberFormat for the 'en' locale with style set to 'currency' and currency to 'USD'; format 49.99 and assign to amount. Create an Intl.ListFormat for the same locale with type set to 'conjunction'; format ['book', 'pen'] and assign to items.

Show example solution

1. Format the amount with new Intl.NumberFormat('en', { style: 'currency', currency: 'USD' }).format(49.99).
2. Format the list with new Intl.ListFormat('en', { type: 'conjunction' }).format(['book', 'pen']).
3. Assign to amount and items.

Example solution:
const amount = new Intl.NumberFormat('en', { style: 'currency', currency: 'USD' }).format(49.99);
const items = new Intl.ListFormat('en', { type: 'conjunction' }).format(['book', 'pen']);

Test yourself

Which Intl constructor shows a cart total with currency?
- Intl.Collator
- Intl.PluralRules
- Intl.NumberFormat
- Intl.ListFormat
Show answer

Intl.NumberFormat — Correct. NumberFormat with style 'currency' formats currency.
Match constructors to their use

NumberFormat

Currency
PluralRules

Plural category
ListFormat

List joining
RelativeTimeFormat

Relative time

Next lesson: Challenge - Performance optimization

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies