如何在JavaScript中实施国际化（I18N）

关键要点

• 国际化 (i18n) 是创建或转换产品和服务的过程，以便它们可以适应当地的语言和文化。本地化 (l10n) 是为特定地区或语言调整国际化软件的过程。
• Globalize 是一个由 jQuery 团队成员开发的用于国际化和本地化的 JavaScript 库。它使用官方 Unicode CLDR JSON 数据，支持所有主要浏览器，并提供数字格式化和解析、日期和时间格式化和解析、相对时间格式化、货币格式化、消息格式化、复数支持和单位支持等功能。
• JavaScript 通过国际化 API（也称为 ECMA-402）提供对国际化的原生支持。但是，由于浏览器之间支持率低且不一致，Globalize 没有使用它。
• Globalize 可以通过 npm 安装，它为其每个功能提供一个模块，允许开发人员只使用他们需要的模块。它通过不在库中托管或嵌入任何语言环境数据来分离代码和内容。
• 使用 Globalize，开发人员可以格式化日期、数字和货币值，解析数字以及格式化相对日期。该库的文档提供了有关如何使用这些功能和其他功能的详细信息。

本文由 Julian Motz、Panayiotis Velisarakos、Vildan Softic 和 Tim Severien 共同评审。感谢所有 SitePoint 的同行评审员，使 SitePoint 的内容达到最佳状态！

假设您是一位开发人员，正在开发下一个热门产品。您的客户喜欢您的产品，它在所有社交网络上都获得了极高的评价。更棒的是，公司首席执行官刚刚获得了 10,000,000 美元的资金，用于拓展新市场。但在您走向全球之前，必须更新产品以支持不同的语言、货币、日期格式等等。您猜怎么着？您和您的团队将负责实现这一目标。从技术角度来说，您的软件必须进行国际化，然后进行本地化。

国际化（也称为 i18n）是创建或转换产品和服务的过程，以便它们可以轻松适应特定的当地语言和文化。本地化（也称为 l10n）是为特定地区或语言调整国际化软件的过程。换句话说，国际化是使您的软件能够支持多种文化（货币格式、日期格式等）的过程，而本地化是实现一种或多种文化的过程。

这两个过程通常被对不同国家感兴趣的公司采用，但它们也可能对从事自己网站工作的单个开发人员有所帮助。例如，您可能知道，我是意大利人，我拥有一个网站。我的网站目前使用英语，但我可能会决定将其国际化，然后将其本地化为意大利语。这对母语为意大利语且不熟悉英语的人非常有益。

在本文中，我将向您介绍 Globalize，这是一个由 jQuery 团队的一些成员开发的用于国际化和本地化的 JavaScript 库。本文中演示的所有代码片段都可以在我们的 GitHub 存储库中找到。

但在深入研究 Globalize 之前，我想用项目负责人 Rafael Xavier de Souza 的话来结束这段关于 i18n 的简短介绍：

开发人员认为 i18n 是关于翻译成非英语语言的。i18n 只需要将当前应用程序扩展到多个国家或市场。我一直试图解释说，i18n 是关于“交谈”的。每个应用程序在某些时候都必须与其用户“交谈”。为了与用户交谈，应用程序可能需要复数支持、性别变格、日期格式化、数字格式化和货币格式化。即使是用英语，正确完成这项工作也可能很棘手。

什么是 Globalize？

Globalize 是 一个利用官方 Unicode CLDR JSON 数据的用于国际化和本地化的 JavaScript 库。 该库是开源的，由 Rafael Xavier de Souza 以及 jQuery 团队的一些成员开发。

Globalize 基于 Unicode Consortium 的通用语言环境数据存储库 (CLDR)，这是目前可用的最大且最全面的语言环境数据标准存储库。因此，与嵌入语言环境数据的库不同，如果您使用 Globalize，则可以轻松地始终使用最新的 CLDR 数据。

该库适用于浏览器和 Node.js 模块。Globalize 1.0 支持所有主要浏览器，包括 IE9 、Chrome、Firefox、Safari 5.1 和 Opera 12.1 。

该库的主要功能包括：

• 数字格式化和解析
• 日期和时间格式化和解析
• 相对时间格式化
• 货币格式化
• 消息格式化
• 复数支持
• 单位支持

我最喜欢 Globalize 的一点是它为其每个功能都提供了一个模块。开发人员可能不需要整个库，因此可以选择需要的模块。另一个有趣的功能是，与其他库不同，它通过不在库中托管或嵌入任何语言环境数据来保持代码与内容分离。

但是 Globalize 并不是唯一的选择。如果您对其他替代方案感兴趣，Rafael 有一个专门的页面。最值得注意的替代方案是 i18next。

Globalize 和 JavaScript 国际化 API

对你们中的一些人来说，这可能会令人惊讶，但 JavaScript 通过国际化 API（也称为 ECMA-402）提供对国际化的原生支持。Intl 对象是在窗口对象上可用的对象，它充当国际化 API 的命名空间。此 API 目前提供的方法可以格式化数字和日期，以及以特定语言比较字符串。

既然您知道国际化 API 的存在，您可能会认为 Globalize 在幕后使用它。这种方法肯定会提高日期和数字格式化的性能。但是，由于浏览器之间的支持率低且非常不一致，因此该库没有使用它。

在我们继续讨论 Globalize 之前，我想让您体验一下国际化 API。

格式化日期

我将展示的第一个示例使用国际化 API 以多种语言环境格式化日期：IT、US 和 GB。

// 2016 年 6 月 30 日
var date = new Date(2016, 5, 30);

// "30/6/2016"
console.log(new Intl.DateTimeFormat('it-IT').format(date));

// "6/30/2016"
console.log(new Intl.DateTimeFormat('en-US').format(date));

// "30/06/2016"
console.log(new Intl.DateTimeFormat('en-GB').format(date));

在此示例中，我使用指定的语言环境（“it-IT”、“en-US”和“en-GB”）使用 DateTimeFormat 构造函数创建一个新的日期格式化器。然后，我调用 format 方法来格式化日期对象。

上面的代码也可用作 JSBin。

格式化数字

如前所述，API 还允许您格式化数字。下面显示了一个使用 NumberFormat 构造函数的示例：

var number = 1302.93;

// "1.302,93"
console.log(new Intl.NumberFormat('it-IT').format(number));

// "1,302.93"
console.log(new Intl.NumberFormat('us-US').format(number));

// "1,302.93"
console.log(new Intl.NumberFormat('en-GB').format(number));

通过查看此第二个代码片段（也可用作 JSBin）的输出，您可以注意到，在意大利，我们对数字的格式与美国和英国不同。

如前所述，对该 API 的支持率较低，但如果您想使用它，可以在应用程序中使用此 polyfill。

既然我已经让您更好地了解了国际化和本地化是如何工作的，那么让我们讨论 Globalize。

安装和使用 Globalize

Globalize 可以通过 npm 轻松安装：

npm install globalize cldr-data --save

此命令还会安装 CLDR 数据，这是加载 Globalize 将使用的语言环境数据（例如，在某种语言中数字或日期的格式）所必需的。安装这两个包后，我们就可以使用该库了。

注意：以下示例假设使用 Node。如果您有兴趣在浏览器中使用 Globalize，我建议您从项目主页上的一个示例开始。webpack 示例使快速启动和运行特别容易。

接下来，我将使用 Globalize 重写上一节中列出的两个代码片段。

格式化日期

第一个示例可以按如下所示实现：

// 2016 年 6 月 30 日
var date = new Date(2016, 5, 30);

// "30/6/2016"
console.log(new Intl.DateTimeFormat('it-IT').format(date));

// "6/30/2016"
console.log(new Intl.DateTimeFormat('en-US').format(date));

// "30/06/2016"
console.log(new Intl.DateTimeFormat('en-GB').format(date));

尽管很简单，但上面的代码允许我涵盖几个主题。第一次使用 Globalize 时，我觉得有点奇怪的是，CLDR 数据使用的一些语言代码只使用两个字母。为了保持一致性，我希望所有语言环境都需要 ISO 3166 标准的完整版本（例如，“it-IT”和“en-US”），而不是简短版本（例如，“it”和“en”）。虽然假设意大利语为意大利语的默认值似乎是合理的（毕竟意大利语起源于意大利），但这对于英语来说是令人困惑的。“en”代表美国英语，而不是英国英语。如果您想确保不会犯和我一样的错误，我建议您查看此表。

另一个值得概述的概念是 entireSupplemental 方法（代码的第三个语句）。这将加载包含国家/地区或其语言环境数据的补充信息的所有文件。例如，电话国家代码（意大利为 39）、人口、一些众所周知的缩写、如何拼写其他国家的货币等等。

我想介绍的最后一点是第四个语句，其中我调用 entireMainFor 方法。这允许加载所需国家/地区的语言环境数据（在上面的示例中为意大利、美国和英国）。

格式化数字

对于格式化数字，Globalize 提供了 formatNumber 方法。该方法的签名是

var number = 1302.93;

// "1.302,93"
console.log(new Intl.NumberFormat('it-IT').format(number));

// "1,302.93"
console.log(new Intl.NumberFormat('us-US').format(number));

// "1,302.93"
console.log(new Intl.NumberFormat('en-GB').format(number));

其中 value 是要格式化的数字，options 是一个用于自定义方法返回值的对象。您可以指定的一些选项示例包括：

• round：定义如何对数字进行舍入。其值可以是以下任何值：ceil、floor、round 或 truncate
• useGrouping：一个布尔值，指示是否应使用分组分隔符
• minimumIntegerDigits：一个非负整数，指示要使用的最小整数位数。

可以在文档中找到可用的完整选项列表。

既然我们已经了解了 formatNumber 方法的更多信息，让我们看看它的实际应用。

npm install globalize cldr-data --save

格式化货币值

该库提供了一个 currencyFormatter 方法来帮助您格式化货币值。此方法支持许多选项，让您可以定义是否要对数字进行舍入，是否要使用货币的符号（例如“$”）或其代码（例如“USD”），等等。

下面显示了 currencyFormatter() 的一个使用示例：

// 包含 Globalize 库
var Globalize = require('globalize');

// 包含 CLDR 数据
var cldrData = require('cldr-data');

// 加载补充数据
Globalize.load(cldrData.entireSupplemental());

// 加载指定语言环境的数据
Globalize.load(cldrData.entireMainFor('it', 'en', 'en-GB'));

// 2016 年 6 月 30 日
var date = new Date(2016, 5, 30);

// "30/6/2016"
console.log(Globalize('it').formatDate(date));

// "6/30/2016"
console.log(Globalize('en').formatDate(date));

// "30/06/2016"
console.log(Globalize('en-GB').formatDate(date));

解析数字

解析数字也可能是您必须执行的任务，例如处理用户输入时。以下示例演示了如何执行此操作：

formatNumber(value[, options])

格式化相对日期

现代 Web 应用中的另一个非常常见的功能是以相对术语显示时间和日期。例如，您通常会发现诸如“昨天”和“上周”之类的标签，而不是显示一天的完整日期。借助 Globalize，通过 relativeTimeFormatter 方法可以轻松完成此任务。下面显示了一个使用示例：

// 2016 年 6 月 30 日
var date = new Date(2016, 5, 30);

// "30/6/2016"
console.log(new Intl.DateTimeFormat('it-IT').format(date));

// "6/30/2016"
console.log(new Intl.DateTimeFormat('en-US').format(date));

// "30/06/2016"
console.log(new Intl.DateTimeFormat('en-GB').format(date));

Globalize 提供了许多我没有在本文中介绍的其他方法。但是，此处介绍的主题应该为您提供了足够的信息来帮助您开始使用。此外，该库的文档非常详细。

结论

在本文中，我讨论了国际化和本地化是什么以及为什么它们对于扩展产品的市场非常重要。我通过提及一些受支持的功能简要介绍了国际化 API，然后，我展示了它们的一些使用示例。

在本文的第二部分中，我向您介绍了 Globalize，这是一个由 jQuery 团队开发的用于国际化和本地化的 JavaScript 库。该库非常强大，并附带了您可能需要的所有方法来国际化您的项目，例如：解析数字、格式化日期和格式化货币值的方法。如果您认为该库为您节省了时间，请随时通过为该项目做出贡献来回馈。

再次提醒您，本文中演示的所有代码片段都可以在我们的 GitHub 存储库中找到。

关于在 JavaScript 中实现国际化 (i18n) 的常见问题解答 (FAQ)

国际化 (i18n) 在 JavaScript 中的重要性是什么？

国际化，通常缩写为 i18n，是 Web 开发的一个重要方面，尤其是在为全球受众创建应用程序时。它涉及准备您的网站或应用程序以支持多种语言和区域差异。这在 JavaScript 中尤其重要，JavaScript 是一种广泛用于 Web 开发的语言。通过在 JavaScript 中实现 i18n，开发人员可以创建满足不同用户群体的应用程序，从而增强用户体验和可访问性。它还有助于本地化应用程序，这可以显著提高应用程序的覆盖范围和可用性。

i18n 在 JavaScript 中是如何工作的？

JavaScript 中的 i18n 通过允许开发人员将特定于语言环境的字符串或消息从应用程序的代码中外部化来工作。然后，这些字符串存储在单独的文件中，通常称为资源包。每个资源包对应于一个特定的语言环境。当应用程序运行时，它会识别用户的语言环境并加载相应的资源包。这样，应用程序就可以以用户首选的语言显示消息和内容。

用于在 JavaScript 中实现 i18n 的一些流行库是什么？

有几个库可用于在 JavaScript 中实现 i18n。一些最流行的库包括 i18next、i18n-js 和 Globalize。这些库提供了一系列功能来促进国际化，例如语言检测、复数化、数字和日期格式化等等。它们还支持各种框架，如 React、Angular 和 Vue.js，使它们成为 Web 开发的多功能工具。

如何在我的 JavaScript 项目中使用 i18n-js 库？

要在您的 JavaScript 项目中使用 i18n-js 库，您首先需要使用 npm 或 yarn 安装它。安装后，您可以将其导入到您的项目中并开始使用其功能。该库提供用于翻译字符串、格式化数字和日期等等的功能。您还可以在单独的 JSON 文件中定义您的翻译，该库可以根据用户的语言环境加载这些文件。

我可以在不使用库的情况下在 JavaScript 中实现 i18n 吗？

是的，可以在不使用库的情况下在 JavaScript 中实现 i18n。这可以通过手动将特定于语言环境的字符串从您的代码中外部化并将它们存储在单独的文件中来完成。但是，对于较大的应用程序，这种方法可能非常耗时且复杂。使用库可以简化流程并提供可以增强应用程序国际化的附加功能。

如何在 i18n 中处理复数化？

由于不同语言的复数形式规则不同，因此在 i18n 中处理复数化可能很棘手。但是，许多 i18n 库都提供了处理复数化的功能。例如，i18n-js 库提供了一个 pluralize 函数，可以根据用户的语言环境处理复数形式。

如何测试我的应用程序的国际化？

测试应用程序的国际化包括检查应用程序是否根据用户的语言环境正确显示不同语言的内容和格式。这可以通过手动更改浏览器中的语言环境设置或使用自动化测试工具来完成。检查边缘情况也很重要，例如缺少翻译或复数形式不正确。

如何在 i18n 中处理日期和数字格式？

不同语言环境之间的日期和数字格式可能大相径庭。许多 i18n 库都提供了根据用户的语言环境格式化日期和数字的功能。例如，i18n-js 库提供了 formatDate 和 formatNumber 函数，可以处理这些任务。

如何在 i18n 中处理从右到左 (RTL) 语言？

在 i18n 中处理从右到左 (RTL) 语言涉及根据用户的语言环境调整应用程序的布局和文本方向。这可以使用 CSS 和 HTML 属性来完成。一些 i18n 库还提供了处理 RTL 语言的功能。

如何与 i18n 一起处理本地化 (l10n)？

本地化，通常缩写为 l10n，涉及将您的应用程序适应特定的语言环境，包括翻译内容、格式化日期和数字等等。虽然 i18n 准备了您的应用程序以支持多个语言环境，但 l10n 涉及为每个特定语言环境实现这些调整。许多 i18n 库还提供了处理本地化的功能。

以上是如何在JavaScript中实施国际化（I18N）的详细内容。更多信息请关注PHP中文网其他相关文章！