javascript
examples
examples.js⚡javascript
/**
* 9.3 Internationalization (Intl) - Examples
*/
// ============================================
// INTL.NUMBERFORMAT - BASIC
// ============================================
console.log('=== Number Formatting ===');
const number = 1234567.89;
// Different locales
console.log('US:', new Intl.NumberFormat('en-US').format(number));
console.log('DE:', new Intl.NumberFormat('de-DE').format(number));
console.log('FR:', new Intl.NumberFormat('fr-FR').format(number));
console.log('JP:', new Intl.NumberFormat('ja-JP').format(number));
console.log('AR:', new Intl.NumberFormat('ar-EG').format(number));
// ============================================
// CURRENCY FORMATTING
// ============================================
console.log('\n=== Currency Formatting ===');
const amount = 1234.56;
const currencies = [
['en-US', 'USD'],
['en-GB', 'GBP'],
['de-DE', 'EUR'],
['ja-JP', 'JPY'],
['zh-CN', 'CNY'],
];
currencies.forEach(([locale, currency]) => {
const formatted = new Intl.NumberFormat(locale, {
style: 'currency',
currency,
}).format(amount);
console.log(`${locale} (${currency}):`, formatted);
});
// Currency display options
console.log('\nCurrency display options:');
const displayOptions = ['symbol', 'code', 'name', 'narrowSymbol'];
displayOptions.forEach((display) => {
try {
const formatted = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
currencyDisplay: display,
}).format(amount);
console.log(`${display}:`, formatted);
} catch (e) {
console.log(`${display}: Not supported`);
}
});
// ============================================
// PERCENTAGE AND UNITS
// ============================================
console.log('\n=== Percentage Formatting ===');
const ratio = 0.7523;
console.log(
'Basic:',
new Intl.NumberFormat('en-US', {
style: 'percent',
}).format(ratio)
);
console.log(
'With decimals:',
new Intl.NumberFormat('en-US', {
style: 'percent',
minimumFractionDigits: 2,
}).format(ratio)
);
console.log('\n=== Unit Formatting ===');
const units = [
['kilometer-per-hour', 100, 'en-US'],
['mile-per-hour', 60, 'en-US'],
['celsius', 37.5, 'en-US'],
['kilogram', 75, 'en-US'],
['liter', 3.5, 'de-DE'],
];
units.forEach(([unit, value, locale]) => {
const formatted = new Intl.NumberFormat(locale, {
style: 'unit',
unit,
}).format(value);
console.log(`${unit}:`, formatted);
});
// ============================================
// NUMBER NOTATION
// ============================================
console.log('\n=== Number Notation ===');
const bigNumber = 1234567890;
console.log('Standard:', new Intl.NumberFormat('en-US').format(bigNumber));
console.log(
'Scientific:',
new Intl.NumberFormat('en-US', {
notation: 'scientific',
}).format(bigNumber)
);
console.log(
'Engineering:',
new Intl.NumberFormat('en-US', {
notation: 'engineering',
}).format(bigNumber)
);
console.log(
'Compact (short):',
new Intl.NumberFormat('en-US', {
notation: 'compact',
compactDisplay: 'short',
}).format(bigNumber)
);
console.log(
'Compact (long):',
new Intl.NumberFormat('en-US', {
notation: 'compact',
compactDisplay: 'long',
}).format(bigNumber)
);
// ============================================
// DATE FORMATTING
// ============================================
console.log('\n=== Date Formatting ===');
const date = new Date('2024-03-15T14:30:45');
// Different locales
const dateLocales = ['en-US', 'en-GB', 'de-DE', 'ja-JP', 'ar-SA'];
dateLocales.forEach((locale) => {
const formatted = new Intl.DateTimeFormat(locale).format(date);
console.log(`${locale}:`, formatted);
});
// Date styles
console.log('\nDate styles (en-US):');
const dateStyles = ['full', 'long', 'medium', 'short'];
dateStyles.forEach((dateStyle) => {
const formatted = new Intl.DateTimeFormat('en-US', { dateStyle }).format(
date
);
console.log(`${dateStyle}:`, formatted);
});
// Time styles
console.log('\nTime styles (en-US):');
dateStyles.forEach((timeStyle) => {
const formatted = new Intl.DateTimeFormat('en-US', { timeStyle }).format(
date
);
console.log(`${timeStyle}:`, formatted);
});
// ============================================
// CUSTOM DATE/TIME FORMAT
// ============================================
console.log('\n=== Custom Date/Time Format ===');
const customFormatter = new Intl.DateTimeFormat('en-US', {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: true,
timeZoneName: 'short',
});
console.log('Full format:', customFormatter.format(date));
// Format to parts
console.log('\nFormat parts:');
const parts = customFormatter.formatToParts(date);
parts.forEach((part) => {
console.log(` ${part.type}: "${part.value}"`);
});
// ============================================
// RELATIVE TIME FORMAT
// ============================================
console.log('\n=== Relative Time Format ===');
const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });
const relativeTimes = [
[-1, 'second'],
[-30, 'second'],
[-1, 'minute'],
[-5, 'minute'],
[-1, 'hour'],
[-1, 'day'],
[1, 'day'],
[-1, 'week'],
[1, 'week'],
[-1, 'month'],
[-1, 'year'],
];
relativeTimes.forEach(([value, unit]) => {
console.log(`${value} ${unit}:`, rtf.format(value, unit));
});
// Styles
console.log('\nRelative time styles:');
const rtfStyles = ['long', 'short', 'narrow'];
rtfStyles.forEach((style) => {
const formatter = new Intl.RelativeTimeFormat('en', {
style,
numeric: 'always',
});
console.log(`${style}:`, formatter.format(-3, 'day'));
});
// ============================================
// LIST FORMAT
// ============================================
console.log('\n=== List Format ===');
const items = ['Apple', 'Banana', 'Orange', 'Mango'];
// Conjunction (and)
console.log(
'Conjunction:',
new Intl.ListFormat('en', {
style: 'long',
type: 'conjunction',
}).format(items)
);
// Disjunction (or)
console.log(
'Disjunction:',
new Intl.ListFormat('en', {
style: 'long',
type: 'disjunction',
}).format(items)
);
// Unit
console.log(
'Unit:',
new Intl.ListFormat('en', {
style: 'narrow',
type: 'unit',
}).format(['5 ft', '11 in'])
);
// Different locales
console.log('\nList format in different locales:');
['en', 'de', 'ja', 'zh'].forEach((locale) => {
const formatted = new Intl.ListFormat(locale, { type: 'conjunction' }).format(
['A', 'B', 'C']
);
console.log(`${locale}:`, formatted);
});
// ============================================
// PLURAL RULES
// ============================================
console.log('\n=== Plural Rules ===');
const pr = new Intl.PluralRules('en');
console.log('English plural categories:');
[0, 1, 2, 5, 10, 21, 22, 100].forEach((n) => {
console.log(`${n}: ${pr.select(n)}`);
});
// Russian has more categories
console.log('\nRussian plural categories:');
const prRu = new Intl.PluralRules('ru');
[1, 2, 3, 5, 11, 21, 22, 25].forEach((n) => {
console.log(`${n}: ${prRu.select(n)}`);
});
// Practical usage
function pluralize(count, forms, locale = 'en') {
const pr = new Intl.PluralRules(locale);
const category = pr.select(count);
return forms[category] || forms.other;
}
const catForms = { one: 'cat', other: 'cats' };
console.log('\nPluralization:');
[0, 1, 2, 5].forEach((n) => {
console.log(`${n} ${pluralize(n, catForms)}`);
});
// ============================================
// COLLATOR - STRING COMPARISON
// ============================================
console.log('\n=== Collator (String Comparison) ===');
// Basic comparison
const collator = new Intl.Collator('en');
console.log('a vs b:', collator.compare('a', 'b')); // -1
console.log('b vs a:', collator.compare('b', 'a')); // 1
console.log('a vs a:', collator.compare('a', 'a')); // 0
// Sorting with locale
const germanWords = ['Ärger', 'Apfel', 'Öffnung', 'Orange'];
console.log('\nGerman sorting:');
console.log('Default:', [...germanWords].sort());
console.log('Locale:', [...germanWords].sort(new Intl.Collator('de').compare));
// Case-insensitive
const caseCollator = new Intl.Collator('en', { sensitivity: 'base' });
console.log('\nCase-insensitive:');
console.log('A vs a:', caseCollator.compare('A', 'a')); // 0
// Numeric sorting
const files = ['file10', 'file2', 'file1', 'file20'];
const numericCollator = new Intl.Collator('en', { numeric: true });
console.log('\nNumeric sorting:');
console.log('Default:', [...files].sort());
console.log('Numeric:', [...files].sort(numericCollator.compare));
// ============================================
// DISPLAY NAMES
// ============================================
console.log('\n=== Display Names ===');
// Region names
const regionNames = new Intl.DisplayNames(['en'], { type: 'region' });
console.log('Regions:');
['US', 'GB', 'DE', 'JP', 'CN', 'FR'].forEach((code) => {
console.log(` ${code}: ${regionNames.of(code)}`);
});
// Language names
const langNames = new Intl.DisplayNames(['en'], { type: 'language' });
console.log('\nLanguages:');
['en', 'de', 'ja', 'zh', 'es', 'fr'].forEach((code) => {
console.log(` ${code}: ${langNames.of(code)}`);
});
// Currency names
const currencyNames = new Intl.DisplayNames(['en'], { type: 'currency' });
console.log('\nCurrencies:');
['USD', 'EUR', 'GBP', 'JPY', 'CNY'].forEach((code) => {
console.log(` ${code}: ${currencyNames.of(code)}`);
});
// In different languages
console.log('\nRegion "DE" in different languages:');
['en', 'de', 'ja', 'fr'].forEach((lang) => {
const names = new Intl.DisplayNames([lang], { type: 'region' });
console.log(` ${lang}: ${names.of('DE')}`);
});
// ============================================
// PRACTICAL: LOCALE-AWARE FORMATTING
// ============================================
console.log('\n=== Practical: Locale-Aware Formatting ===');
function formatUserData(user, locale) {
const numberFmt = new Intl.NumberFormat(locale, {
style: 'currency',
currency: user.currency,
});
const dateFmt = new Intl.DateTimeFormat(locale, {
dateStyle: 'long',
timeStyle: 'short',
});
const listFmt = new Intl.ListFormat(locale, { type: 'conjunction' });
return {
balance: numberFmt.format(user.balance),
lastLogin: dateFmt.format(user.lastLogin),
skills: listFmt.format(user.skills),
};
}
const user = {
balance: 12345.67,
currency: 'USD',
lastLogin: new Date(),
skills: ['JavaScript', 'TypeScript', 'React'],
};
console.log('en-US:', formatUserData(user, 'en-US'));
console.log('de-DE:', formatUserData({ ...user, currency: 'EUR' }, 'de-DE'));
// ============================================
// PRACTICAL: RELATIVE DATE HELPER
// ============================================
console.log('\n=== Practical: Relative Date Helper ===');
function formatRelativeDate(date, locale = 'en') {
const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });
const now = Date.now();
const diffMs = date.getTime() - now;
const diffSeconds = Math.round(diffMs / 1000);
const diffMinutes = Math.round(diffSeconds / 60);
const diffHours = Math.round(diffMinutes / 60);
const diffDays = Math.round(diffHours / 24);
const diffWeeks = Math.round(diffDays / 7);
const diffMonths = Math.round(diffDays / 30);
const diffYears = Math.round(diffDays / 365);
if (Math.abs(diffSeconds) < 60) return rtf.format(diffSeconds, 'second');
if (Math.abs(diffMinutes) < 60) return rtf.format(diffMinutes, 'minute');
if (Math.abs(diffHours) < 24) return rtf.format(diffHours, 'hour');
if (Math.abs(diffDays) < 7) return rtf.format(diffDays, 'day');
if (Math.abs(diffWeeks) < 4) return rtf.format(diffWeeks, 'week');
if (Math.abs(diffMonths) < 12) return rtf.format(diffMonths, 'month');
return rtf.format(diffYears, 'year');
}
const testDates = [
new Date(Date.now() - 30 * 1000), // 30 seconds ago
new Date(Date.now() - 5 * 60 * 1000), // 5 minutes ago
new Date(Date.now() - 3 * 60 * 60 * 1000), // 3 hours ago
new Date(Date.now() - 24 * 60 * 60 * 1000), // yesterday
new Date(Date.now() - 7 * 24 * 60 * 60 * 1000), // last week
];
testDates.forEach((d) => {
console.log(formatRelativeDate(d));
});
console.log('\n=== Examples Complete ===');