Intl Is Your Superhero

Intl Is
Your Superhero

Me

Raymond Camden
Senior Developer Evangelist for Adobe
🕸️ raymondcamden.com
✉️ raymondcamden@gmail.com

github.com/cfjedimaster/intl-is-your-superhero

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

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.

Intl.DateTimeFormat Docs

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

Intl.RelativeTimeFormat Docs

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

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

Intl IsYour Superhero

Me

Agenda

What is it?

What is it?

What it is not!

General Syntax

The User's Language

What Not To Do

Date Formatting

Date Formatting

Example

Example (United Kingdom)

Example (Multiple)

Date Formatting Options (some)

Date Formatting Options (even more...)

Example (Long)

Example (Short)

Example (Specific)

Date Range Formatting

Relative Date Formatting

Example (Specific)

Cool... but...

Duration Date Formatting

Example

Example

Example

Food for Thought...

Number Formatting

Number Formatting

Example

Example

Decimal (Regular number) Options

Example

Example

Example

Example

Formatting Ranges

Example

Currency

Example

Example

Example

Example

String Stuff

List Formatting

Example

Example

Plural Formatting

Segmenting Strings

Why?

Final Demo

Next Steps

Questions?

Intl Is
Your Superhero