Agenda

• What (It is...)
• What (It isn't...)
• Lots and lots of demos

What is it?

• Namespace object (fancy way of saying it compromises multiple functions)
• Supports internationalization of numbers and dates
• Supports internationalization of string related features
• Supports locale specific string comparison
• And more!

What is it?

• Spec: The Intl Object
• Very well supported...
• With some exceptions on Firefox

What it is not!

• Translation
• Internationalization of your UI
• Currency exchange

General Syntax

• Make a new instance of the object: new Intl.something()
• Default locale is user's locale, or specify: new Intl.something('en-US')
• Locales can be a string ('en-US') or an object (Intl.Locale)
• Browser tries it's best based on the input
• Run a method, typically format

The User's Language

• navigator.language
• navigator.languages
• Accept-Language ^*

* Client-side JavaScript can't read HTTP request headers.

See the Pen navigator.language(s) by Raymond Camden (@cfjedimaster) on CodePen.

What Not To Do

• Use the user's IP location
• Force them into one language

Date Formatting

Date Formatting

• Intl.DateTimeFormat
• Can format to dates, times, or both
• Multiple "baked in" styles
• Can format ranges

Example

let now = new Date();

// defaults for everything
console.log(new Intl.DateTimeFormat().format(now));

Example (United Kingdom)

let now = new Date();

console.log(new Intl.DateTimeFormat('en-GB').format(now));

Example (Multiple)

let now = new Date();
let tomorrow = new Date().setDate(now.getDate() + 1);

let formatter = new Intl.DateTimeFormat();
console.log(`
Today: ${formatter.format(now)} - 
Tomorrow: ${formatter.format(tomorrow)}
`);

Date Formatting Options (some)

• Locale
• Calendar (List) and Numbering System (List)
• 24 hour (overrides locale)
• Timezone

Date Formatting Options (even more...)

• weekday, era, year, month, day, day period
• hour, minute, second, fractionalSecondDigits
• Styles: full, long, medium, short

Example (Long)

let now = new Date();

let formatter = new Intl.DateTimeFormat('en-US', {
	dateStyle:'long', 
	timeStyle:'long'
});

console.log(formatter.format(now));

Example (Short)

let now = new Date();

let formatter = new Intl.DateTimeFormat('en-US', {
	dateStyle:'short', 
	timeStyle:'short'
});

console.log(formatter.format(now));

See the Pen navigator.language(s) by Raymond Camden (@cfjedimaster) on CodePen.

Example (Specific)

let now = new Date();

let formatter = new Intl.DateTimeFormat('en-US', {
	year:'2-digit',
	month:'short',
	day:'2-digit',
	dayPeriod:'long'
});

console.log(formatter.format(now));

Date Range Formatting

• Takes 2 dates (technically one is ok)
• Takes formatting options
• Displays the range between them
• Intelligently!

See the Pen DateTime Formatting Options by Raymond Camden (@cfjedimaster) on CodePen.

Relative Date Formatting

• Intl.RelativeTimeFormat
• Responsible for describing a time in the past or future
• "in X so and so" or "X day ago"
• Supports number and unit (ie day or minute or so forth)
• Units: year, quarter, month, week, day, hour, minute, second
• Supports turning off numeric answers (0 minutes versus now)

Example (Specific)

let formatter = new Intl.RelativeTimeFormat('en', {
  style:"long"
});

console.log(formatter.format(-1,"day"));
console.log(formatter.format(1,"minute"));

See the Pen DateTime Range Example by Raymond Camden (@cfjedimaster) on CodePen.

Cool... but...

What do you pick for the units?

What number do you use?

Using Intl.RelativeTimeFormat for Localized Relative Timings

Duration Date Formatting

• Intl.DurationFormat
• Responsible for describing a span of time
• Can specify a specific amount of months, weeks, days, hours, minutes, seconds, milliseconds, microsends, and nanoseconds
• Can specify styles long, short, narrow, and "digital"
• Can specify formatting for parts (years, etc)
• Can specify to show years, months, weeks, etc always even if the duration doesn't need it
• Not supported in Firefox

Example

let duration = {
	hours: 28, 
	minutes: 19
}

console.log(
	new Intl.DurationFormat('en', { style:"long" }).format(duration)
);

Example

let duration = {
	hours: 28, 
	minutes: 19
}

console.log(
	new Intl.DurationFormat('en', 
	{ style:"long", daysDisplay:'always' }).format(duration)
);

Example

let duration = {
	hours: 28, 
	minutes: 19
}

console.log(
	new Intl.DurationFormat('es', { style:"long" }).format(duration)
);

See the Pen Duration Example by Raymond Camden (@cfjedimaster) on CodePen.

Food for Thought...

When is 2/9/2024?

Number Formatting

Number Formatting

• Intl.NumberFormat
• Formats numbers and currencies
• Can support numbers larger than MAX INT
• Can support "units" (i.e., X gallons)
• Can simplify (i.e. 100 millions or 100M)
• Multiple "baked in" styles
• Can format ranges

Example

// modern browsers let you use _ to help read large numbers
// info: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#numeric_separators
let input = 544_194_391;

console.log(
	new Intl.NumberFormat('en', { style:"decimal" }).format(input)
);

Example

let input = 544_194_391;

console.log(
	new Intl.NumberFormat('fr', { style:"decimal" }).format(input)
);

Decimal (Regular number) Options

• minimumIntegerDigits
• minimumFractionDigits and maximumFractionDigits
• minimumSignificantDigits and maximumSignificantDigits
• roundingPriority, roundingIncrement, roundingMode
• trailingZero
• Docs

Example

let input = 1;

console.log(
	new Intl.NumberFormat('en', { minimumIntegerDigits:2 }).format(input)
);

Example

let input = 544_194_391;

console.log(
	new Intl.NumberFormat('en', { maximumSignificantDigits:4 }).format(input)
);

Example

let input = 544_194_391;

console.log(
	new Intl.NumberFormat('en', { notation:'compact' }).format(input)
);

Example

let input = 544_194_391;

console.log(
	new Intl.NumberFormat('en', 
		{ notation:'compact', compactDisplay:'long' }).format(input)
);

Formatting Ranges

• Still uses formatting options
• If the two values are close, will use an 'approx equals' value
• .formatRange()

Example

let a = 9_000;
let b = 999_999;

console.log(
	new Intl.NumberFormat('en', 
		{ notation:'compact', compactDisplay:'long' })
		.formatRange(a,b)
);

See the Pen Format Range for Numbers by Raymond Camden (@cfjedimaster) on CodePen.

Currency

• Formats a number in a particular currency
• Currency != Locale
• "In the French locale, format XXXXXXX USD"

Example

let input = 544_194_391;

console.log(
	new Intl.NumberFormat('en', 
	{ style:"currency", currency:"USD" }).format(input)
);

Example

let input = 544_194_391;

console.log(
	new Intl.NumberFormat('fr', 
	{ style:"currency", currency:"USD" }).format(input)
);

Example

let input = 544_194_391;

console.log(
	new Intl.NumberFormat('en', 
	{ style:"currency", currency:"USD", notation:"compact" }).format(input)
);

Example

let input = 544_194_391;

console.log(
	new Intl.NumberFormat('en', 
	{ 
		style:"currency", currency:"USD", 
		notation:"compact", currencyDisplay:'name' }).format(input)
);

String Stuff

List Formatting

• Intl.ListFormat
• Formats a list of items
• Supports AND/OR ("X, Y, and Z" vs "X, Y, or Z")
• Supports no AND/OR ("X, Y, Z")

Example

let input = ['cats','dogs','books'];

console.log(
	new Intl.ListFormat('en').format(input)
);

Example

let input = ['cats','dogs','books'];

console.log(
	new Intl.ListFormat('es').format(input)
);

See the Pen ListFormat by Raymond Camden (@cfjedimaster) on CodePen.

Plural Formatting

• Intl.PluralRules
• Helps with describing the plural of something and the other of something
• API tells you the form based on the number
• An example, given 0, 1, or 2 cats, English speakers say "0 cats", "1 cat", "2 cats"
• This API will tell you which to use, but won't "write" the plural form
• Returns: zero, one, two, few, many, or other
• Uses a select method

See the Pen PluralRules by Raymond Camden (@cfjedimaster) on CodePen.

Segmenting Strings

• Intl.Segmentor
• Locale specific way to break a string into parts
• Graphemes, words, sentences
• Returns an iterator

Why?

If we were to use String.prototype.split(" ") to segment a text in words, we would not get the correct result if the locale of the text does not use whitespaces between words (which is the case for Japanese, Chinese, Thai, Lao, Khmer, Myanmar, etc.).

Source

See the Pen Segmenter by Raymond Camden (@cfjedimaster) on CodePen.

Final Demo

Before ~ After

Next Steps

• Intl Docs @ MDN
• Intl Explorer

Questions?