javascript

examples

examples.js
/**
 * 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 ===');
Examples - JavaScript Tutorial | DeepML