npm 包 @shadow-node/i18n 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在 Web 开发中，国际化（i18n）是一个非常重要的问题，尤其是在国际化程度较高的应用中，如电商平台、多语言新闻网站等。为了更好地支持不同语言和地域，我们需要一个好用的 i18n 库来简化本地化的内容管理。

今天，我们介绍一个名为 @shadow-node/i18n 的 npm 包，它可以极大地方便我们在前端开发项目中的 i18n 工作。

安装

在使用之前，我们需要在项目中安装该包。

npm install @shadow-node/i18n --save

基本使用

初始化

const I18n = require("@shadow-node/i18n");
const i18n = new I18n({
  defaultLocale: 'en',
  directory: __dirname + '/locales'
});

在初始化 I18n 实例时，我们需要传入一个配置对象，其中包括了默认语言 defaultLocale 和本地化资源路径 directory 两个参数。

可以看到，该库使用 CommonJS 规范进行包管理，并提供了通用的 require 函数。

使用

该库的 API 非常简单，只提供了两个方法：get 和 setLocale。

get(key: string, data?: Object): string

获取某个 L10n Key 的本地化文本，其中 key 表示唯一的文本标识符，而 data 则用于文本中的占位符替换。示例：
```
console.log(i18n.get("Welcome")); // "Welcome"
console.log(i18n.get("Hello {name}", { name: "World" })); // "Hello World"
```
在上面的例子中，Welcome 和 Hello {name} 就是我们自定义的文本标识符，在 locales/ 中使用 JSON 格式存储：
```
// en.json
{
  "Welcome": "Welcome",
  "Hello {name}": "Hello {name}"
}
```
在使用 get 方法时，如果文本不存在，则会返回键本身。

setLocale(locale: string): void

设置当前语言为 locale。

i18n.setLocale('fr');
console.log(i18n.get("Welcome")); // "Bienvenue"

进阶使用

Plurals

在多语言环境中，复数形式是一项非常重要的功能，因为不同语言的复数规则有很大不同。该库支持多种复数规则。

// en.json
{
  "There is one apple": {
    "one": "There is one apple",
    "other": "There are {count} apples"
  }
}

可以发现，我们在 There is one apple 这个标识符下留了两个可选文本，分别对应于“单数”和“复数”两种情况。

如何确定当前的复数状态呢？该库提供了 count 值来让用户自定义。示例：

console.log(i18n.get("There is one apple", { count: 1 })); // "There is one apple"
console.log(i18n.get("There is one apple", { count: 3 })); // "There are 3 apples"

注意到文本中的占位符 {count} ，它用于占用一个数字变量。

下面是该库支持的复数规则：

zero, one, two, few, many, other ———— 适用于所有语言（调用 select 就可）
ordinal ———— 第几个（1st，2nd，3rd，4th，……）
range ———— 范围（1-10，11-99，……）
approximate ———— 大约的数字

文本插值

在进行多语言项目的开发时，往往因为不同语言的句子结构差异而无法直接套用本地化文本。

例如，我们需要将以下英文句子翻译为多语言：

I am a student of Class {class} and my name is {name}.

可能我们需要翻译成中文：

我是{class}班的学生，我的名字叫{name}。

可是在日语中，通常是这样的语序：

{class} 組の生徒 {name} です。

在 Python 或 Golang 中，可能会采用下列代码进行多语言文本处理：

# Python 3
f"I am a student of Class {class} and my name is {name}."

// Go
fmt.Sprintf("I am a student of Class %s and my name is %s.", class, name)

那么，如何在 JavaScript 或 TypeScript 中实现类似的文本插值功能呢？该库提供了字符串模板替换的功能。

在文本中非常常见的场景就是把值插入到一个字符串中，这可以通过在本地化文本的标识符中使用变量来完成。

// en.json
{
  "welcome_user": "Welcome {username}!",
}

此时，在 Hi 用户名的文本中，我们可以这样用：

console.log(i18n.get("welcome_user", { username: "Tom" })); // "Welcome Tom!"

对于更复杂的字符串插值，比如上述的 I am a student of Class {class} and my name is {name}。 ，该库同样可以处理。我们只需要将其存入本地化的 JSON 文件中，然后在 JavaScript 代码中获取它，并将占位符以变量的形式传入，就可以完成替换。

// en.json
{
  "student_of_class": "I am a student of Class {class} and my name is {name}."
}

console.log(
  i18n.get("student_of_class", { class: "Math", name: "Tom" })
); // "I am a student of Class Math and my name is Tom."

如此一来，我们的代码就可以在不同的语言环境中达到一致的效果。

总结

在本文中，我们介绍了使用 @shadow-node/i18n 包进行前端 i18n 的基本方法。我们可以通过配置默认语言和本地化资源路径，将不同语言的文本存在 JSON 格式的文件中，然后在运行时动态获取本地化文本。

通过模板替换和复数处理等功能，该库能够方便地解决多语言环境下文本处理的难题。

总之， @shadow-node/i18n 库使得前端 i18n 工作更加轻松、高效，帮助我们更好地实现多语言环境下的 Web 应用开发。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/600574c181e8991b448ea243