什么是i18n
i18n，即internationalization的缩写，指的是国际化。在软件开发领域中，i18n特指将软件设计成能够适应不同地域、不同语言的情况下正常运行的过程。
i18n-helpers是什么
i18n-helpers是一个npm包，用于在前端项目中实现国际化功能。它提供了一些辅助函数，供我们在项目中使用，让国际化功能的开发变得更加便捷。
如何使用i18n-helpers
安装
如同其他npm包，我们可以通过npm命令进行安装。
npm install i18n-helpers --save
配置
- 关于语言文件
i18n-helpers需要一个包含语言翻译信息的JSON文件。该文件中需要提供有关特定语言的键值对。键必须是唯一的，并且值的类型必须为字符串。下面是一个该文件的示例。
{
"greetings.hello": "你好",
"greetings.goodbye": "再见"
}在这个示例中，我们包含了两个短语，分别是「你好」和「再见」，它们被分别存储在"greetings.hello"和"greetings.goodbye"中。
- 配置语言列表
在你的程序中，你需要指定要使用的语言（可能有多种语言）。那么我们将这些语言以数组的形式保存在一个文件中，再把这个文件引入到你的代码中。该文件中应该返回这些语言的列表。
例如下面是一个语言列表，在这里我们只包括了两种语言：英语和中文。
export default ['en', 'zh'];
- 加载语言
我们应该在应用程序的入口处加载语言文件，确保它们在首次使用前被解析好。幸运的是，i18n-helpers包中有一个可以用于实现此目的的便捷方法，如下：
-- -------------------- ---- -------
------ - ---- -- -------- - ---- ---------------
----- -------- - ---
-------------------------------------------
-------------------------------------------
----------------------------- -- -
--------------------- ---
---------------------------------------------------
---在上述代码中，我们将 "i18nLoad" 方法从 "i18n-helpers" 包中导入。这将负责加载配置文件中指定的语言文件。如你所见，这是一个异步操作；在两种语言都加载完成后，我们才会得到一个Promise resolved的状态，表示语言已经加载。在这个Promise中，我们可以正常地渲染应用程序了。
使用i18n-helpers
以下是一些i18n-helpers可以帮助我们实现的功能：
- 取得文本
下面是一个取得短语的示例，它要获取被存储在语言文件中键名为 "greetings.hello" 的短语。
import { getText } from 'i18n-helpers';
const phrase = getText('greetings.hello');
console.log(phrase);- 格式化文本
在有些情况下，我们需要把文本内容与其他值结合起来，以构成一种更加有表现力的语句。例如，一个问候语可能需要使用用户名作为一部分，以让问候更加个性化。此时，我们可以使用 "formatText" 方法，如下：
import { formatText } from 'i18n-helpers';
const username = "李明";
const greeting = formatText(getText('greetings.hello'), username);
console.log(greeting);- 翻译元素内容
我们也可以使用"translateNode内容"方法自动替换HTML元素的文本内容。使我们的前端应用程序变得轻松多了。
<div id="example">
<span>greetings.hello</span>
</div>import { translateNodeText } from 'i18n-helpers';
const exampleDiv = document.getElementById('example');
const spanElem = exampleDiv.querySelector('span');
translateNodeText(spanElem, { defaultValue: spanElem.textContent });如上所示，”translateNodeText”方法接收两个参数：用于替换文本的HTML元素以及键名。另外，“defaultValue”可以让方法在没找到其他替换文本时，将此值作为默认文本，此处选择了元素的原值。
总结
在I18n-Helpers中，我们得到了大量的关于实现国际化功能的便利性方法。在我们的前端项目中，只需要完成简单的配置即可获得高度的支持。这极大地缩短了实现国际化代码的编写时间。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055dbb81e8991b448db798