在现代网页应用程序中，国际化是一项必要的任务。针对不同的语言环境，我们需要为应用程序提供相应的本地化文本资源。在前端开发中，npm 包 i18n2 提供了一种简单而又强大的国际化解决方案。
i18n2 的安装与初始化
使用 i18n2，首先需要通过 npm 进行安装。在终端中输入以下命令：
--- ------- ------ -----
接下来，在代码中引入 i18n2，并进行初始化：
----- ---- - ----------------- ---------------- -------- ------ ------ -- --------- ---------- --------- - ----------- -- ------------ -------------- ----- -- ------- ---
在初始化时，需要指定所支持的语言环境（locales）、本地化文本资源的存放路径（directory）和默认的语言环境（defaultLocale）。i18n2 默认使用 __() 函数来提供本地化文本资源。
本地化文本资源的编写和使用
接下来，我们就需要编写本地化文本资源了。i18n2 支持多种格式的本地化资源，本文这里以 JSON 文件作为例子。
假设我们的应用程序需要支持英语和中文两种语言环境。我们可以在 locales 目录下新建两个 JSON 文件：en.json 和 zh.json，分别存放英语和中文的本地化文本资源。
en.json 的内容可能如下所示：
- ---------- ----------- -------- ------- ---------- -
zh.json 的内容可能如下所示：
- ---------- ------ -------- -------------- -
可以看到，这两个文件中都包含了两个键值对，分别对应着 welcome 和 hello 两个本地化文本资源。其中，hello 还包含了变量 {{name}}，用于接受动态的姓名值。
为了使用这些本地化文本资源，我们可以在代码中调用 __() 函数：
----- ---- - ------- ----------------------- - ---- ----
这里 __('hello', { name }) 的作用就是获取名为 hello 的本地化文本资源，然后将 {name} 模板中的 name 变量替换为 'John'。
如果当前的语言环境是指定的，那么输出内容就会是 Hello, John! 或 你好，John！，具体取决于当前的语言环境是否为英语。
动态语言环境的切换
除了在初始化时指定默认的语言环境以外，i18n2 还提供了一种简便的方式来切换当前的语言环境。我们只需在代码中调用 i18n.setLocale() 函数，并传入所期望的语言环境即可。
以以下代码为例：
----------------------------------- ----- ---- -- - ----- ------ - ------------------ ------------------- -------- ------------------ --- -- - - -------- ---
这里是一个 Express.js 的路由处理函数。当请求 URL 是 /change-language/en 时，它会将当前的语言环境切换到英语。而当请求 URL 是 /change-language/zh 时，它则会将当前的语言环境切换到中文。
本地化文本资源的管理
使用 i18n2，无需手动维护本地化文本资源，因为它提供了一种简单而又强大的管理工具 i18n2-conv。
通过以下命令，可以安装 i18n2-conv：
--- ------- -------- ----------
安装完成后，在终端中输入以下命令，即可将本地化文本资源导出为 Excel 文件：
---------- ------
如果需要将 Excel 文件中的本地化文本资源重新导入回来，只需执行以下命令：
---------- ------
总结
i18n2 是一款优秀的前端国际化解决方案。它提供了简单而又强大的 API 和管理工具，可以帮助我们轻松地维护本地化文本资源，并使我们的应用程序支持多语言环境。希望本文对使用 i18n2 的同学们有所帮助！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005667f81e8991b448e28ff