M

MLOG

中文

利用 JavaScript Intl API 开启全球市场。学习日期、数字、货币等格式化的国际化最佳实践，确保为全球用户提供无缝的体验。

JavaScript Intl API：面向全球受众的国际化最佳实践

在当今互联互通的世界中，创建能够满足全球受众需求的 Web 应用程序至关重要。JavaScript Intl API 提供了强大的国际化 (i18n) 工具，使您能够根据不同区域的惯例格式化日期、数字、货币等。本文探讨了利用 Intl API 构建真正全球化应用程序的最佳实践。

理解国际化 (i18n) 和本地化 (l10n)

在深入探讨 Intl API 的具体细节之前，了解国际化 (i18n) 和本地化 (l10n) 之间的区别非常重要。I18n 是指在设计和开发应用程序时，使其能够轻松适应不同的语言和地区，而无需进行工程上的更改。而 L10n 则是指通过翻译文本和定制其他特定于区域的元素，使一个国际化的应用程序适应特定区域的过程。

Intl API 专注于 i18n 方面，提供了处理区域敏感数据的机制，而本地化通常涉及提供翻译和特定于区域的配置。

Intl API 的关键组件

Intl API 由几个关键对象组成，每个对象负责处理国际化的特定方面：

使用 Intl API 的最佳实践

为了有效利用 Intl API 并确保为您的全球受众提供积极的用户体验，请考虑以下最佳实践：

1. 指定正确的区域设置

国际化的基础是指定正确的区域设置 (locale)。区域设置标识了用于格式化的语言、地区和任何特定变体。您可以从 navigator.language 属性或 Accept-Language HTTP 标头中获取用户的首选区域设置。

在创建 Intl 对象时，您可以将区域设置指定为字符串或字符串数组。如果您提供一个数组，API 将尝试从可用选项中找到最佳匹配的区域设置。

示例：

const locale = navigator.language || 'en-US';
const numberFormat = new Intl.NumberFormat(locale);

如果用户的首选区域设置不可用，您可以提供一个备用区域设置。例如，如果用户的浏览器报告了一个不支持的区域设置，您可以使用 'en-US' 作为默认值。

2. 利用 Intl.DateTimeFormat 进行日期和时间格式化

正确格式化日期和时间对于提供本地化体验至关重要。Intl.DateTimeFormat 对象允许您根据特定区域的惯例格式化日期和时间。

您可以通过指定各种选项来自定义格式，例如年、月、日、小时、分钟和秒的格式。您还可以指定时区，以确保日期和时间对世界不同地区的用户正确显示。

示例：

const locale = 'de-DE'; // 德语 (德国)
const date = new Date();
const options = {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  timeZone: 'Europe/Berlin'
};

const dateTimeFormat = new Intl.DateTimeFormat(locale, options);
const formattedDate = dateTimeFormat.format(date); // 输出: 例如 "22. Mai 2024, 14:30"
console.log(formattedDate);

此示例根据德语（德国）区域设置格式化当前日期和时间，包括年、月、日、小时和分钟。它还指定了 'Europe/Berlin' 时区。

请记住要考虑世界各地使用的不同日期和时间格式。例如，美国使用 MM/DD/YYYY，而许多其他国家使用 DD/MM/YYYY。

3. 使用 Intl.NumberFormat 进行数字、货币和百分比格式化

Intl.NumberFormat 对象提供了一种灵活的方式，可以根据特定于区域的惯例格式化数字、货币和百分比。您可以通过指定诸如货币、样式（十进制、货币或百分比）、最小和最大小数位数等选项来自定义格式。

示例（货币格式化）：

const locale = 'ja-JP'; // 日语 (日本)
const amount = 12345.67;
const options = {
  style: 'currency',
  currency: 'JPY'
};

const numberFormat = new Intl.NumberFormat(locale, options);
const formattedAmount = numberFormat.format(amount); // 输出: 例如 "￥12,346"
console.log(formattedAmount);

此示例将数字 12345.67 格式化为日元 (JPY)。请注意，货币符号 (￥) 和分组分隔符 (,) 会根据日本区域设置自动调整。

示例（百分比格式化）：

const locale = 'ar-EG'; // 阿拉伯语 (埃及)
const percentage = 0.75;
const options = {
  style: 'percent',
  minimumFractionDigits: 2
};

const numberFormat = new Intl.NumberFormat(locale, options);
const formattedPercentage = numberFormat.format(percentage); // 输出: 例如 "٧٥٫٠٠٪"
console.log(formattedPercentage);

此示例将数字 0.75 格式化为阿拉伯语（埃及）的百分比。输出包括阿拉伯百分号 (٪) 和两位小数。

货币格式化的重要注意事项：

4. 使用 Intl.PluralRules 正确处理复数

不同语言的复数规则差异很大。例如，英语有简单的单数和复数形式，而其他语言则有更复杂的规则，这些规则基于数字的值。Intl.PluralRules 对象可帮助您确定给定数字和区域设置的正确复数形式。

示例：

const locale = 'ru-RU'; // 俄语 (俄罗斯)
const pluralRules = new Intl.PluralRules(locale);

function getPluralForm(count) {
  const rule = pluralRules.select(count);
  switch (rule) {
    case 'one': return 'товар'; // tovar (单数)
    case 'few': return 'товара'; // tovara (少数)
    case 'many': return 'товаров'; // tovarov (多数)
    default: return 'товаров'; // 默认为多数
  }
}

const count = 5;
const pluralForm = getPluralForm(count);
console.log(`${count} ${pluralForm}`); // 输出: "5 товаров"

此示例演示了如何使用 Intl.PluralRules 在俄语中为单词“товар”（物品）获取正确的复数形式。俄语根据数字以 1、2-4 还是 5-9 结尾而有不同的复数形式。

5. 使用 Intl.ListFormat 格式化列表

在呈现项目列表时，格式可能因区域设置而异。Intl.ListFormat 对象允许您根据特定于区域的惯例格式化列表，包括使用不同的连接词（例如，“and”，“or”）和列表分隔符（例如，逗号、分号）。

示例：

const locale = 'es-ES'; // 西班牙语 (西班牙)
const list = ['manzanas', 'naranjas', 'plátanos'];
const listFormat = new Intl.ListFormat(locale, { style: 'long', type: 'conjunction' });

const formattedList = listFormat.format(list); // 输出: "manzanas, naranjas y plátanos"
console.log(formattedList);

此示例以西班牙语（西班牙）格式化一个水果列表，使用连词“y”（和）连接最后两个项目。

6. 使用 Intl.RelativeTimeFormat 格式化相对时间

显示相对时间（例如，“昨天”，“2 小时后”）提供了一种用户友好的方式来呈现时间信息。Intl.RelativeTimeFormat 对象允许您根据特定于区域的惯例格式化相对时间。

示例：

const locale = 'fr-CA'; // 法语 (加拿大)
const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });

console.log(rtf.format(-1, 'day')); // 输出: "hier"
console.log(rtf.format(2, 'day')); // 输出: "dans 2 jours"

此示例以法语（加拿大）格式化相对时间。输出显示“hier”（昨天）和“dans 2 jours”（2 天后）。

numeric 选项控制数字的显示方式。'auto' 在可用时显示相对词语（如“昨天”），否则显示数字。'always' 始终显示数字。

7. 使用 Intl.Collator 对字符串进行排序

字符串比较是区域敏感的。字符串的排序方式因语言而异。例如，在德语中，字符“ä”通常像“a”一样排序，而在瑞典语中，它排在“z”之后。Intl.Collator 对象允许您根据特定区域的规则比较字符串。

示例：

const locale = 'de-DE';
const collator = new Intl.Collator(locale);

const strings = ['äpfel', 'birnen', 'bananen', 'aprikosen'];
strings.sort(collator.compare);

console.log(strings); // 输出: ["äpfel", "aprikosen", "bananen", "birnen"]

此示例使用 Intl.Collator 对一个德语单词数组进行排序。请注意，即使“ä”在字母表中靠后，“äpfel”也排在“aprikosen”之前。

8. 处理边缘情况和缺失数据

并非所有区域设置都受每个浏览器或环境的支持。处理区域设置不可用或数据缺失的边缘情况至关重要。考虑以下策略：

9. 使用不同区域设置进行彻底测试

彻底的测试对于确保您的国际化应用程序在所有支持的区域设置下都能正常工作至关重要。使用各种区域设置测试您的应用程序，包括使用不同字符集、日期和时间格式、数字格式和复数规则的语言。

考虑使用自动化测试工具来验证您的应用程序在不同区域设置下的行为是否符合预期。

10. 考虑性能影响

虽然 Intl API 通常是高效的，但创建 Intl 对象的成本可能相对较高。为了优化性能，请考虑以下几点：

Intl API 之外：国际化的进一步考虑

虽然 Intl API 提供了强大的数据格式化工具，但国际化不仅仅涉及格式化。还应考虑以下额外方面：

结论

JavaScript Intl API 是构建面向全球受众的 Web 应用程序的宝贵工具。通过遵循本文概述的最佳实践，您可以创建不仅功能强大，而且对世界各地的用户具有文化敏感性和用户友好性的应用程序。拥抱 Intl API 的力量，在全球舞台上释放您应用程序的潜力。掌握 Intl API 将为您的所有用户带来更具包容性和可访问性的体验，无论他们身在何处或使用何种语言。