如何通过JavaScript的国际化API实现多语言支持，以及它如何处理日期、货币和数字的本地化？

JavaScript的国际化API是一组内置的原生接口，核心由Intl对象提供，可帮助开发者在不依赖第三方库的情况下完成多语言支持与各类数据的本地化展示，适配不同国家地区的用户使用习惯。

Intl对象基础与多语言文本支持

Intl对象是JavaScript国际化能力的核心载体，它包含多个构造函数，可针对不同场景的本地化需求提供解决方案。实现多语言文本支持时，通常会配合语言标签使用，语言标签遵循BCP 47规范，比如zh-CN代表简体中文，en-US代表美式英语。

我们可以使用Intl.DisplayNames来获取语言对应的本地化名称，示例代码如下：

// 获取不同语言的本地化显示名称
const zhDisplayNames = new Intl.DisplayNames(['zh-CN'], { type: 'language' });
const enDisplayNames = new Intl.DisplayNames(['en-US'], { type: 'language' });

console.log(zhDisplayNames.of('en-US')); // 输出：美国英语
console.log(enDisplayNames.of('zh-CN')); // 输出：Simplified Chinese

日期的本地化处理

日期本地化可以通过Intl.DateTimeFormat实现，它可以根据指定的语言标签和配置项，将日期对象格式化为对应地区习惯的字符串。

常用配置项包括日期样式dateStyle、时间样式timeStyle，也可以自定义年、月、日、时、分、秒的显示规则，示例如下：

const date = new Date('2024-05-20T14:30:00');

// 简体中文日期格式化
const zhDateFormatter = new Intl.DateTimeFormat('zh-CN', {
  dateStyle: 'full',
  timeStyle: 'short'
});
console.log(zhDateFormatter.format(date)); // 输出：2024年5月20日星期一 下午2:30

// 美式英语日期格式化
const enDateFormatter = new Intl.DateTimeFormat('en-US', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric'
});
console.log(enDateFormatter.format(date)); // 输出：May 20, 2024, 2:30 PM

货币的本地化处理

货币本地化使用Intl.NumberFormat配合currency相关配置实现，需要指定货币代码，比如CNY代表人民币，USD代表美元，同时可以设置展示样式。

示例代码如下：

const price = 1299.99;

// 人民币本地化展示
const cnyFormatter = new Intl.NumberFormat('zh-CN', {
  style: 'currency',
  currency: 'CNY'
});
console.log(cnyFormatter.format(price)); // 输出：¥1,299.99

// 美元本地化展示
const usdFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
});
console.log(usdFormatter.format(price)); // 输出：$1,299.99

数字的本地化处理

除了货币场景，普通数字的本地化也可以通过Intl.NumberFormat实现，可配置小数位数、千分位分隔符、百分比展示等规则。

示例如下：

const number = 1234567.891;

// 简体中文数字格式化，保留2位小数
const zhNumberFormatter = new Intl.NumberFormat('zh-CN', {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
});
console.log(zhNumberFormatter.format(number)); // 输出：1,234,567.89

// 百分比格式化
const percentFormatter = new Intl.NumberFormat('zh-CN', {
  style: 'percent',
  minimumFractionDigits: 1
});
console.log(percentFormatter.format(0.856)); // 输出：85.6%

// 科学计数法格式化
const scientificFormatter = new Intl.NumberFormat('zh-CN', {
  notation: 'scientific'
});
console.log(scientificFormatter.format(12345)); // 输出：1.235E4

多语言配置的通用封装

在实际项目中，我们可以将国际化配置封装成通用函数，方便不同场景调用，示例如下：

// 国际化工具封装
const i18n = {
  // 获取日期格式化实例
  getDateFormatter(locale, options) {
    return new Intl.DateTimeFormat(locale, options);
  },
  // 获取数字/货币格式化实例
  getNumberFormatter(locale, options) {
    return new Intl.NumberFormat(locale, options);
  },
  // 获取语言显示名称实例
  getDisplayNames(locale, options) {
    return new Intl.DisplayNames(locale, options);
  }
};

// 使用封装的工具
const dateFormatter = i18n.getDateFormatter('ja-JP', { dateStyle: 'long' });
console.log(dateFormatter.format(new Date())); // 输出：2024年5月20日

注意事项

• Intl API的兼容性较好，现代浏览器和Node.js环境都支持，无需额外引入polyfill即可在大多数场景使用。
• 语言标签需要符合规范，错误或不支持的语言标签会使用运行时默认的语言配置作为 fallback。
• 格式化实例的创建有一定性能开销，高频使用的场景下建议缓存实例，避免重复创建。

IntlJavaScript多语言支持本地化国际化API修改时间：2026-06-29 11:33:58