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