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

答案：JavaScript的Intl API通过Intl.DateTimeFormat、Intl.NumberFormat等构造函数实现多语言支持，能根据locale自动格式化日期、时间、货币和数字，适应不同文化习惯。例如，同一日期在en-US、zh-CN和de-DE中分别显示为“May 15, 2024”、“2024年5月15日”和“15. Mai 2024”，货币符号位置、千位分隔符和小数点也按本地规则调整。Intl.DateTimeFormat支持精细控制年月日、时区、12/24小时制等；Intl.NumberFormat可处理货币、百分比和单位，并自动适配符号与分隔方式。此外，Intl还提供高级功能如Intl.Collator（本地化排序）、Intl.ListFormat（列表连接）、Intl.RelativeTimeFormat（相对时间）和Intl.DisplayNames（本地化名称显示），全面解决国际化中的复杂问题，极大简化前端本地化工作。

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

JavaScript的国际化API (Intl API) 提供了一套强大的标准，能让我们在Web应用中轻松实现多语言支持。它通过

Intl.DateTimeFormat

登录后复制

、

Intl.NumberFormat

登录后复制

等构造函数，以声明式的方式处理日期、时间、货币、数字乃至字符串排序的本地化显示，确保用户无论身处何地，都能以最符合其文化习惯的方式看到内容，极大地简化了前端本地化的复杂性。

解决方案

要通过JavaScript的Intl API实现多语言支持并处理日期、货币和数字的本地化，核心在于理解并运用

Intl

登录后复制

对象下的各种构造函数。这个API的设计哲学就是“声明式”，你只需要告诉它你想要格式化的内容、目标语言环境（locale）以及一些可选的格式化选项，剩下的复杂逻辑，比如不同语言的数字分隔符、日期顺序、货币符号位置等，Intl API都会替你搞定。在我看来，这简直是前端开发者的福音，省去了我们自己维护庞大本地化规则表的噩梦。

举个例子，假设我们要显示一个日期、一个价格和一个普通数字：

const date = new Date(); // 当前日期
const price = 12345.678; // 一个价格
const number = 987654.321; // 一个普通数字

// 针对不同语言环境进行格式化
const locales = ['en-US', 'zh-CN', 'de-DE'];

locales.forEach(locale => {
  console.log(`--- Locale: ${locale} ---`);

  // 日期格式化
  const dateFormatter = new Intl.DateTimeFormat(locale, {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    timeZoneName: 'short'
  });
  console.log(`日期: ${dateFormatter.format(date)}`);

  // 货币格式化
  const currencyFormatter = new Intl.NumberFormat(locale, {
    style: 'currency',
    currency: 'USD', // 指定货币类型，这里用美元
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  });
  console.log(`价格: ${currencyFormatter.format(price)}`);

  // 数字格式化
  const numberFormatter = new Intl.NumberFormat(locale, {
    style: 'decimal',
    minimumFractionDigits: 0,
    maximumFractionDigits: 3 // 最多保留三位小数
  });
  console.log(`数字: ${numberFormatter.format(number)}`);
  console.log('\n');
});

/* 示例输出 (可能因运行环境有时区差异):
--- Locale: en-US ---
日期: May 15, 2024, 03:30:00 PM GMT+8
价格: $12,345.68
数字: 987,654.321

--- Locale: zh-CN ---
日期: 2024年5月15日 下午3:30:00 GMT+8
价格: US$12,345.68
数字: 987,654.321

--- Locale: de-DE ---
日期: 15. Mai 2024 um 15:30:00 GMT+8
价格: 12.345,68 $
数字: 987.654,321
*/

登录后复制

从上面的例子就能看出来，我们只是改变了

locale

登录后复制

参数，Intl API就自动适应了不同语言环境的日期格式（en-US是月日年，zh-CN是年月日，de-DE是日月年）、货币符号位置（en-US在前面，de-DE在后面）、数字千位分隔符（en-US和zh-CN是逗号，de-DE是点）和小数点（en-US和zh-CN是点，de-DE是逗号）。这种开箱即用的能力，真的让本地化工作变得没那么头疼。

立即学习“Java免费学习笔记（深入）”；

Intl.DateTimeFormat

登录后复制

如何确保日期和时间在不同文化背景下正确显示？

Intl.DateTimeFormat

登录后复制

是处理日期和时间本地化的主力军。说实话，日期和时间可能是国际化中最让人头疼的部分之一，因为不同文化对它们的表示方式差异巨大，从年月日顺序、月份名称、星期几的缩写，到12小时制/24小时制、AM/PM的用法，甚至不同时区的显示，都得考虑周全。

Intl.DateTimeFormat

登录后复制

就是为了解决这些痛点而生的。

它的构造函数接受两个参数：

locales

登录后复制

和

options

登录后复制

。

locales

登录后复制

是一个Babel语言标签字符串（比如

'en-US'

登录后复制

、

'zh-CN'

登录后复制

、

'fr-FR'

登录后复制

），或者一个包含这些字符串的数组。这个参数告诉API你希望日期时间以哪种文化习惯来展示。而

options

登录后复制

则是一个对象，用来精细控制输出的格式，比如你想要显示年份、月份、日期、小时、分钟、秒，以及它们的显示样式（是数字、长名称还是短名称）。

在我实际的项目中，经常会遇到这样的需求：用户希望看到一个既包含日期又包含时间的完整表示，但又不能太冗长。这时候

options

登录后复制

就显得尤为重要。

const eventDate = new Date('2025-01-20T14:30:00Z'); // UTC时间

// 完整的日期时间，包含时区信息
const formatterFull = new Intl.DateTimeFormat('en-US', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: '2-digit',
  minute: '2-digit',
  timeZoneName: 'short', // 显示时区缩写
  hour12: true // 使用12小时制
});
console.log(`美国格式 (完整): ${formatterFull.format(eventDate)}`);
// 输出: January 20, 2025 at 09:30 AM GMT+8 (假设本地时区是GMT+8)

// 针对中国用户，可能更习惯24小时制和中文月份
const formatterZh = new Intl.DateTimeFormat('zh-CN', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: '2-digit',
  minute: '2-digit',
  hour12: false // 使用24小时制
});
console.log(`中国格式 (24小时制): ${formatterZh.format(eventDate)}`);
// 输出: 2025年1月20日 10:30 (假设本地时区是GMT+8，注意时区转换)

// 仅显示日期，且月份使用数字
const formatterShortDate = new Intl.DateTimeFormat('fr-FR', {
  year: 'numeric',
  month: '2-digit',
  day: '2-digit'
});
console.log(`法国格式 (短日期): ${formatterShortDate.format(eventDate)}`);
// 输出: 20/01/2025

// 还可以控制星期几的显示
const formatterWeekday = new Intl.DateTimeFormat('es-ES', {
  weekday: 'long', // 完整星期几名称
  year: 'numeric',
  month: 'numeric',
  day: 'numeric'
});
console.log(`西班牙格式 (带星期): ${formatterWeekday.format(eventDate)}`);
// 输出: lunes, 20/1/2025

登录后复制

这里值得注意的是

timeZoneName

登录后复制

和

timeZone

登录后复制

选项。

timeZoneName

登录后复制

是用来显示时区名称的，比如

'short'

登录后复制

会显示

'GMT+8'

登录后复制

，

'long'

登录后复制

会显示

'中国标准时间'

登录后复制

。而

timeZone

登录后复制

则允许你指定一个具体的时区ID（如

'America/New_York'

登录后复制

），这在处理跨时区事件时非常有用，可以确保无论用户在哪里，都能看到事件在特定时区的正确时间。我个人觉得，理解这些细微之处，是真正用好

Intl.DateTimeFormat

登录后复制

的关键。

Intl.NumberFormat

登录后复制

在处理货币和普通数字时有哪些独特之处？

Intl.NumberFormat

登录后复制

在处理数字，特别是货币和百分比时，展现出了其独特的强大之处。它不仅仅是简单地添加逗号或小数点，而是根据目标语言环境的文化规范，自动调整数字的格式、分组方式、小数位数，甚至货币符号的位置和表示。

对于货币，

Intl.NumberFormat

登录后复制

提供了

style: 'currency'

登录后复制

选项，同时你必须指定

currency

登录后复制

参数，比如

'USD'

登录后复制

、

'EUR'

登录后复制

、

'JPY'

登录后复制

等ISO 4217货币代码。它会自动处理：

货币符号的显示： 是在数字前面还是后面？是使用符号（如
```
$
```
登录后复制
、
```
€
```
登录后复制
）还是代码（如
```
USD
```
登录后复制
）？这由
```
currencyDisplay
```
登录后复制
选项控制。
小数位数： 大多数货币有固定的小数位数（如美元是两位），Intl API会自动处理，你也可以通过
```
minimumFractionDigits
```
登录后复制
和
```
maximumFractionDigits
```
登录后复制
进行微调。
千位分隔符和小数点： 不同国家使用不同的分隔符，例如美国用逗号作千位分隔符，点作小数点；德国则相反。Intl API会根据
```
locale
```
登录后复制
自动适配。

const amount = 1234567.89;

// 美元，符号显示
const usdFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'symbol' // $1,234,567.89
});
console.log(`美国美元: ${usdFormatter.format(amount)}`);

// 欧元，代码显示
const eurFormatter = new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'EUR',
  currencyDisplay: 'code' // 1.234.567,89 EUR
});
console.log(`德国欧元: ${eurFormatter.format(amount)}`);

// 日元，日元没有小数
const jpyFormatter = new Intl.NumberFormat('ja-JP', {
  style: 'currency',
  currency: 'JPY',
  currencyDisplay: 'symbol'
});
console.log(`日本日元: ${jpyFormatter.format(amount)}`); // ¥1,234,568 (自动四舍五入并去除小数)

登录后复制

对于普通数字，

Intl.NumberFormat

登录后复制

的

style

登录后复制

选项可以是

'decimal'

登录后复制

（默认值）、

'percent'

登录后复制

或

'unit'

登录后复制

。

腾讯智影-AI数字人

基于AI数字人能力，实现7*24小时AI数字人直播带货，低成本实现直播业务快速增增，全天智能在线直播

查看详情

'decimal'

登录后复制

：处理常规数字。你可以控制千位分隔符、小数点，以及小数位数。

const bigNumber = 9876543.21;
const decimalFormatterUS = new Intl.NumberFormat('en-US');
console.log(`美国数字: ${decimalFormatterUS.format(bigNumber)}`); // 9,876,543.21

const decimalFormatterDE = new Intl.NumberFormat('de-DE');
console.log(`德国数字: ${decimalFormatterDE.format(bigNumber)}`); // 9.876.543,21

登录后复制

'percent'

登录后复制

：自动将数字乘以100并添加百分号。

const percentage = 0.75;
const percentFormatter = new Intl.NumberFormat('en-US', {
  style: 'percent'
});
console.log(`百分比: ${percentFormatter.format(percentage)}`); // 75%

登录后复制

'unit'

登录后复制

：用于格式化带有单位的数字，比如

'kilometer'

登录后复制

、

'liter'

登录后复制

。这个功能非常实用，省去了我们自己拼接单位的麻烦。

const distance = 123.45;
const unitFormatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'kilometer',
  unitDisplay: 'long' // 'short', 'narrow'
});
console.log(`单位: ${unitFormatter.format(distance)}`); // 123.45 kilometers

登录后复制

我个人觉得，

Intl.NumberFormat

登录后复制

的独特之处在于它不仅仅是格式化，更是“本地化格式化”。它深刻理解了不同文化对数字表达的习惯，这比我们手动去写一堆正则表达式或者条件判断要高效和准确得多。尤其是

currency

登录后复制

和

unit

登录后复制

样式，它们把原本需要大量手动处理的国际化细节，封装得如此优雅，让开发者可以专注于业务逻辑，而不是那些繁琐的文化差异。

除了日期、货币和数字，Intl API还能为多语言支持提供哪些高级功能？

Intl API远不止日期、货币和数字格式化那么简单，它还提供了一些非常实用的“高级”功能，这些功能在构建真正国际化的应用时，往往能带来意想不到的便利和用户体验提升。在我看来，这些API虽然不像

DateTimeFormat

登录后复制

和

NumberFormat

登录后复制

那样常用，但它们解决的问题却非常核心且难以手动实现。

Intl.Collator

登录后复制

：本地化字符串比较和排序 这是我个人觉得非常强大的一个功能。在不同语言中，字符的排序规则是不同的。比如在德语中，

ä

登录后复制

可能被视为和

登录后复制

一样，或者排在

登录后复制

之后。在瑞典语中，

ö

登录后复制

和

å

登录后复制

是独立的字母。如果只是简单地使用

String.prototype.localeCompare()

登录后复制

，它默认行为可能不符合你的预期，但

Intl.Collator

登录后复制

提供了更细粒度的控制。

const words = ['résumé', 'resume', 're-sume'];

// 默认排序（可能不符合法语习惯）
console.log(`默认排序: ${words.sort()}`); // ['re-sume', 'resume', 'résumé']

// 法语排序，忽略重音符号（'résumé' 和 'resume' 视为相同）
const frenchCollator = new Intl.Collator('fr', {
  sensitivity: 'base' // 'base' 忽略重音和大小写
});
console.log(`法语排序 (忽略重音): ${words.sort(frenchCollator.compare)}`);
// 可能会输出 ['resume', 're-sume', 'résumé'] 或类似，取决于具体实现，但 'resume' 和 'résumé' 会被视为接近

// 德语排序，考虑变音字母
const germanWords = ['Äpfel', 'Apfel', 'Zebra'];
const germanCollator = new Intl.Collator('de');
console.log(`德语排序: ${germanWords.sort(germanCollator.compare)}`);
// 输出: ['Apfel', 'Äpfel', 'Zebra'] (在德语中 Ä 通常排在 A 之后，Z 之前)

登录后复制

sensitivity

登录后复制

选项非常关键，它可以让你控制比较时是否区分大小写、重音符号等。这对于构建本地化的搜索、过滤和列表排序功能至关重要。

Intl.ListFormat

登录后复制

：本地化列表格式化 你有没有想过，在英语中我们说 "A, B, and C"，而在中文中我们说 "A、B和C"？这个“和”字的位置和分隔符的选择，在不同语言中是不同的。

Intl.ListFormat

登录后复制

就是用来解决这个问题的。它能根据语言环境，自动生成符合语法习惯的列表字符串。

const items = ['apple', 'banana', 'orange'];

// 英语 (conjunction: 'and')
const enList = new Intl.ListFormat('en-US', {
  type: 'conjunction',
  style: 'long'
});
console.log(`英语列表: ${enList.format(items)}`); // apple, banana, and orange

// 中文 (conjunction: '和')
const zhList = new Intl.ListFormat('zh-CN', {
  type: 'conjunction',
  style: 'long'
});
console.log(`中文列表: ${zhList.format(items)}`); // apple、banana和orange

// 德语 (disjunction: 'or')
const deList = new Intl.ListFormat('de-DE', {
  type: 'disjunction',
  style: 'long'
});
console.log(`德语列表 (或): ${deList.format(items)}`); // apple, banana oder orange

登录后复制

这个API在生成用户友好的提示信息、面包屑导航或任何需要列举多个项目的场景下都非常有用。

Intl.RelativeTimeFormat

登录后复制

：本地化相对时间格式化 “2天前”、“下个月”、“去年”——这些相对时间的表达，在不同语言中也有自己的规则。

Intl.RelativeTimeFormat

登录后复制

可以帮助我们以本地化的方式显示相对时间。

const rtfEn = new Intl.RelativeTimeFormat('en-US', {
  numeric: 'auto'
});
console.log(`英语相对时间: ${rtfEn.format(-2, 'day')}`); // 2 days ago
console.log(`英语相对时间: ${rtfEn.format(1, 'month')}`); // next month

const rtfZh = new Intl.RelativeTimeFormat('zh-CN', {
  numeric: 'auto'
});
console.log(`中文相对时间: ${rtfZh.format(-2, 'day')}`); // 2天前
console.log(`中文相对时间: ${rtfZh.format(1, 'month')}`); // 下个月

登录后复制

numeric: 'auto'

登录后复制

是一个很棒的选项，它会让API在可能的情况下使用像“昨天”、“明天”、“下个月”这样的自然语言表达，而不是生硬的“1天前”、“1个月后”。

Intl.DisplayNames

登录后复制

：本地化显示名称 这个API用于获取语言、区域、脚本或货币的本地化显示名称。比如，你想在下拉菜单中显示语言名称，而不是ISO代码，

Intl.DisplayNames

登录后复制

就能派上用场。

const languageNames = new Intl.DisplayNames(['en'], {
  type: 'language'
});
console.log(`英语显示名称 (en): ${languageNames.of('en')}`); // English
console.log(`英语显示名称 (zh): ${languageNames.of('zh')}`); // Chinese

const currencyNames = new Intl.DisplayNames(['zh-CN'], {
  type: 'currency'
});
console.log(`中文显示名称 (USD): ${currencyNames.of('USD')}`); // 美元
console.log(`中文显示名称 (EUR): ${currencyNames.of('EUR')}`); // 欧元

登录后复制

这些高级功能，虽然可能不是每个应用都立刻需要，但一旦你的应用走向国际化，它们就能帮你解决那些看似细小、实则影响用户体验的关键问题。Intl API的全面性，让我觉得它不仅仅是一个工具集，更像是JavaScript在国际化领域的一套完整解决方案，真的值得我们深入探索和利用。

以上就是如何通过JavaScript的国际化API实现多语言支持，以及它如何处理日期、货币和数字的本地化？的详细内容，更多请关注php中文网其它相关文章！