阿里云主机折上折
  • 微信号
Current Site:Index > Improved internationalization API

Improved internationalization API

Author:Chuan Chen 阅读数:60509人阅读 分类: JavaScript

ECMAScript 15 introduced several enhancements to the Internationalization API, focusing on improving the capabilities for formatting dates, times, numbers, and lists, while also introducing more flexible mechanisms for localized string handling. These improvements make it easier for developers to build applications that adapt to different regions and languages.

Enhancements to Date and Time Formatting

ECMAScript 15 expanded the functionality of Intl.DateTimeFormat with additional configuration options and formatting patterns. Developers now have more precise control over how dates and times are displayed:

// New date formatting options
const date = new Date(2023, 11, 25);
const formatter = new Intl.DateTimeFormat('en-US', {
  dateStyle: 'full',
  timeStyle: 'long',
  calendar: 'gregory',
  numberingSystem: 'latn'
});

console.log(formatter.format(date));
// Output: "Monday, December 25, 2023 at 12:00:00 AM GMT"

The new dateStyle and timeStyle options provide predefined formatting patterns, supporting four styles: 'full', 'long', 'medium', and 'short'. Additionally, the calendar and numberingSystem options allow specifying different calendar and numbering systems.

Expanded Number Formatting

Intl.NumberFormat now supports more number types and formatting options:

// New number formatting features
const number = 1234567.89;
const formatter = new Intl.NumberFormat('de-DE', {
  style: 'unit',
  unit: 'liter-per-100-kilometers',
  unitDisplay: 'long',
  signDisplay: 'exceptZero',
  minimumFractionDigits: 2
});

console.log(formatter.format(number));
// Output: "+1.234.567,89 Liter pro 100 Kilometer"

New features include:

  • Support for additional unit types (unit)
  • Control over unit display (unitDisplay)
  • Sign display strategies (signDisplay)
  • More flexible fractional digit control

Introduction of List Formatting

ECMAScript 15 introduced the Intl.ListFormat API for formatting list strings:

// List formatting example
const list = ['苹果', '香蕉', '橙子'];
const formatter = new Intl.ListFormat('zh-CN', {
  style: 'long',
  type: 'conjunction'
});

console.log(formatter.format(list));
// Output: "苹果、香蕉和橙子"

Configurable options include:

  • style: Controls format length ('long', 'short', or 'narrow')
  • type: Specifies conjunction type ('conjunction', 'disjunction', or 'unit')

Relative Time Formatting

The new Intl.RelativeTimeFormat provides localized representations of relative time:

// Relative time formatting
const rtf = new Intl.RelativeTimeFormat('zh-CN', {
  numeric: 'auto',
  style: 'long'
});

console.log(rtf.format(-1, 'day'));  // "昨天"
console.log(rtf.format(2, 'week'));  // "2周后"

Supported time units include: 'second', 'minute', 'hour', 'day', 'week', 'month', and 'year'.

Enhanced Sorting Capabilities

Intl.Collator now supports additional sorting options:

// Enhanced string sorting
const collator = new Intl.Collator('fr-FR', {
  sensitivity: 'accent',
  ignorePunctuation: true,
  numeric: true
});

const words = ['été', 'eté', 'été', '100', '20'];
console.log(words.sort(collator.compare));
// Output: ["20", "100", "eté", "été", "été"]

New options include:

  • ignorePunctuation: Ignores punctuation
  • numeric: Enables numeric-aware sorting
  • Finer sensitivity control

Plural Rule Handling

ECMAScript 15 provides more robust plural form handling through Intl.PluralRules:

// Plural rule determination
const pr = new Intl.PluralRules('ar-EG');
console.log(pr.select(0));    // 'zero'
console.log(pr.select(1));    // 'one'
console.log(pr.select(2));    // 'two'
console.log(pr.select(6));    // 'few'
console.log(pr.select(18));   // 'many'

Supported plural categories include: 'zero', 'one', 'two', 'few', 'many', and 'other', depending on language rules.

Localized String Handling

The new Intl.Locale class provides parsing and manipulation of locale identifiers:

// Locale object operations
const locale = new Intl.Locale('zh-Hans-CN', {
  calendar: 'chinese',
  hourCycle: 'h23'
});

console.log(locale.language);  // "zh"
console.log(locale.script);    // "Hans"
console.log(locale.region);    // "CN"
console.log(locale.calendar);  // "chinese"

Developers can access and modify various components of a locale, including language, script, region, and extension attributes.

Unit Formatting

New unit formatting capabilities handle various measurement units:

// Unit formatting
const nf = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'mile-per-hour',
  unitDisplay: 'narrow'
});

console.log(nf.format(65));  // "65 mph"

Supported unit types include length, area, volume, mass, temperature, and other physical quantities.

Date Range Formatting

Intl.DateTimeFormat now supports date range formatting:

// Date range formatting
const start = new Date(2023, 0, 1);
const end = new Date(2023, 0, 31);
const formatter = new Intl.DateTimeFormat('en-US', {
  month: 'long',
  day: 'numeric'
});

console.log(formatter.formatRange(start, end));
// Output: "January 1 – 31"

Time Zone Name Display

Localized display names for time zones can now be retrieved:

// Time zone name display
const formatter = new Intl.DateTimeFormat('en-US', {
  timeZoneName: 'longGeneric'
});

console.log(formatter.format(new Date()));
// Possible output: "10/15/2023, Pacific Time"

Supported time name types include: 'short', 'long', 'shortOffset', 'longOffset', 'shortGeneric', and 'longGeneric'.

本站部分内容来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了你的权益请来信告知我们删除。邮箱:cc@cccx.cn

Front End Chuan

Front End Chuan, Chen Chuan's Code Teahouse 🍵, specializing in exorcising all kinds of stubborn bugs 💻. Daily serving baldness-warning-level development insights 🛠️, with a bonus of one-liners that'll make you laugh for ten years 🐟. Occasionally drops pixel-perfect romance brewed in a coffee cup ☕.