在 Web 开发中，国际化（i18n）是一个非常重要的问题，尤其是在国际化程度较高的应用中，如电商平台、多语言新闻网站等。为了更好地支持不同语言和地域，我们需要一个好用的 i18n 库来简化本地化的内容管理。
今天，我们介绍一个名为 @shadow-node/i18n 的 npm 包，它可以极大地方便我们在前端开发项目中的 i18n 工作。
安装
在使用之前，我们需要在项目中安装该包。
--- ------- ----------------- ------
基本使用
初始化
----- ---- - ----------------------------- ----- ---- - --- ------ -------------- ----- ---------- --------- - ---------- ---
在初始化 I18n 实例时，我们需要传入一个配置对象，其中包括了默认语言 defaultLocale 和本地化资源路径 directory 两个参数。
可以看到，该库使用 CommonJS 规范进行包管理，并提供了通用的 require 函数。
使用
该库的 API 非常简单，只提供了两个方法：get 和 setLocale。
get(key: string, data?: Object): string获取某个 L10n Key 的本地化文本，其中
key表示唯一的文本标识符，而data则用于文本中的占位符替换。示例：--------------------------------- -- --------- --------------------------- -------- - ----- ------- ---- -- ------ ------
在上面的例子中，
Welcome和Hello {name}就是我们自定义的文本标识符，在locales/中使用 JSON 格式存储：-- ------- - ---------- ---------- ------ -------- ------ ------- -
在使用
get方法时，如果文本不存在，则会返回键本身。setLocale(locale: string): void设置当前语言为
locale。--------------------- --------------------------------- -- -----------
进阶使用
Plurals
在多语言环境中，复数形式是一项非常重要的功能，因为不同语言的复数规则有很大不同。该库支持多种复数规则。
-- -------
-
------ -- --- ------- -
------ ------ -- --- -------
-------- ------ --- ------- -------
-
-可以发现，我们在 There is one apple 这个标识符下留了两个可选文本，分别对应于“单数”和“复数”两种情况。
如何确定当前的复数状态呢？该库提供了 count 值来让用户自定义。示例：
--------------------------- -- --- ------- - ------ - ---- -- ------ -- --- ------ --------------------------- -- --- ------- - ------ - ---- -- ------ --- - -------
注意到文本中的占位符 {count} ，它用于占用一个数字变量。
下面是该库支持的复数规则：
zero,one,two,few,many,other———— 适用于所有语言（调用 select 就可）ordinal———— 第几个（1st，2nd，3rd，4th，……）range———— 范围（1-10，11-99，……）approximate———— 大约的数字
文本插值
在进行多语言项目的开发时，往往因为不同语言的句子结构差异而无法直接套用本地化文本。
例如，我们需要将以下英文句子翻译为多语言：
- -- - ------- -- ----- ------- --- -- ---- -- -------
可能我们需要翻译成中文：
--------------------------
可是在日语中，通常是这样的语序：
------- ---- ------ ---
在 Python 或 Golang 中，可能会采用下列代码进行多语言文本处理：
- ------ - --- -- - ------- -- ----- ------- --- -- ---- -- --------
-- -- -------------- -- - ------- -- ----- -- --- -- ---- -- ----- ------ -----
那么，如何在 JavaScript 或 TypeScript 中实现类似的文本插值功能呢？该库提供了字符串模板替换的功能。
在文本中非常常见的场景就是把值插入到一个字符串中，这可以通过在本地化文本的标识符中使用变量来完成。
-- ------- - --------------- -------- ------------- -
此时，在 Hi 用户名 的文本中，我们可以这样用：
------------------------------------ - --------- ----- ---- -- -------- -----
对于更复杂的字符串插值，比如上述的 I am a student of Class {class} and my name is {name}。 ，该库同样可以处理。我们只需要将其存入本地化的 JSON 文件中，然后在 JavaScript 代码中获取它，并将占位符以变量的形式传入，就可以完成替换。
-- ------- - ------------------- -- -- - ------- -- ----- ------- --- -- ---- -- -------- -
------------ ---------------------------- - ------ ------- ----- ----- -- -- -- -- -- - ------- -- ----- ---- --- -- ---- -- -----
如此一来，我们的代码就可以在不同的语言环境中达到一致的效果。
总结
在本文中，我们介绍了使用 @shadow-node/i18n 包进行前端 i18n 的基本方法。我们可以通过配置默认语言和本地化资源路径，将不同语言的文本存在 JSON 格式的文件中，然后在运行时动态获取本地化文本。
通过模板替换和复数处理等功能，该库能够方便地解决多语言环境下文本处理的难题。
总之， @shadow-node/i18n 库使得前端 i18n 工作更加轻松、高效，帮助我们更好地实现多语言环境下的 Web 应用开发。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600574c181e8991b448ea243