npm 包 light-translator 使用教程

在前端开发中，经常需要进行字符串翻译。而开发者可以使用 npm 包 light-translator 来快速实现网站或应用程序的多语言支持。该包提供了一种简单的方式，让开发者可以将多语言翻译整合到自己的应用程序中。本文将详细介绍 light-translator 的使用，以及如何让你的应用程序以更好的方式实现语言翻译。

安装 npm 包 light-translator

安装 light-translator 很简单。在控制台中执行以下指令即可：

npm install light-translator --save

这将在你的应用程序中安装 light-translator 包。

创建和加载翻译文件

在使用 light-translator 时，需要先创建一个翻译文件。该文件是一个 JSON 格式的文件。我们将文件命名为 i18n.json.

{
    "helloWorld": {
        "en": "Hello World",
        "cn": "你好，世界"
    }
}

翻译文件包含一个顶层对象，该对象包含了给定字符串的所有可用翻译。每个字符串都被标识为一个属性，其中包含一个 name 和一些翻译。在本例中，我们为 "helloWorld" 创建了两种翻译：一种是英文（en），另一种是中文（cn）。

要加载翻译文件，你需要将其加载到你的应用程序中。下面是一个例子，假设我们将 i18n.json 文件存储在项目根目录下。

const Translator = require("light-translator");

const trans = new Translator();
trans.loadFromFile("./i18n.json");

此处，我们首先从 light-translator 包中导入了 Translator 类。类的实例将被用于后续的所有翻译操作中。然后，我们实例化了一个 trans 对象，并加载了翻译文件。

翻译字符串

现在我们已经准备好翻译字符串了。让我们尝试用翻译 "helloWorld" 来介绍如何使用 light-translator 为应用程序进行翻译。

const hello = trans.translate("helloWorld", "cn");

console.log(hello); // "你好，世界"

这里使用 translate() 方法对 "helloWorld" 进行了翻译。 第一个参数 "helloWorld" 是需要翻译的字符串的 name， 第二个参数 "cn" 是要使用的语言代码。这个方法会返回翻译后的字符串，打印结果为 "你好，世界"。

如果未指定语言选项，则默认使用英文翻译：

const hello = trans.translate("helloWorld");

console.log(hello); // "Hello World"

调用时切换语言

有时候需要在应用程序中切换语言，而不是在加载时就指定。我们可以通过调用 setLanguage() 方法来实现这一点：

trans.setLanguage("cn");

const hello = trans.translate("helloWorld");

console.log(hello); // "你好，世界"

这里我们调用 setLanguage() 方法，将语言设置为中文。然后通过 translate() 方法来翻译字符串。翻译的结果将根据我们选择的语言返回。

翻译变量

在应用程序中，有时我们需要将变量值嵌入翻译的字符串中。我们可以使用 light-translator 提供的 %s 占位符来实现这一点。

{
    "greeting": {
        "en": "Hi there, %s!",
        "cn": "你好，%s！"
    }
}

在翻译字符串时，需要将变量值作为 translate() 方法的第三个参数传入。

const greeting = trans.translate("greeting", "en", "Jordan");

console.log(greeting); // "Hi there, Jordan!"

这里的 "Jordan" 是变量值，它将被嵌入到翻译的字符串中。

总结

本文介绍了 light-translator 的用法，向你展示了如何安装、创建和加载翻译文件以及翻译字符串。你还学习了如何切换语言以及如何在字符串中嵌入变量值。使用 light-translator，开发者能够很容易地为应用程序或网站实现多语言支持。

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