简介
i18next 是一个广泛使用的国际化 (i18n) 库，它可以帮助我们将应用程序本地化为不同的语言和地区。本文将介绍如何在前端项目中使用 i18next。
安装
# 使用 npm npm install i18next # 使用 yarn yarn add i18next
如何使用
初始化 i18next
在使用 i18next 之前，需要先进行初始化。
-- -------------------- ---- ------- ------ ------- ---- ---------- ------ - ---------------- - ---- ---------------- ------------------------------------ ---- ----- ------------ ----- ---------- - --- - ------------ - --------- ------ -------- -- -- -- ---展开代码
上述代码会创建一个 i18next 实例，并设置语言为英语（lng）和默认的语言回退（fallbackLng）。资源文件（resources）是一个相当重要的概念，它包含可以转换文本字符串的不同语言和地区。
在上面的代码例子中，只有一个 en 的资源文件。在 en 资源文件中，存在一个翻译文本字符串 greeting。在实际使用中，我们会根据需要添加更多的资源文件。
在组件中使用
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - -------------- - ---- ---------------- -------- ----- - ----- - - - - ----------------- ------ ------------------------- - ------ ------- ----展开代码
在使用组件中，我们需要使用 useTranslation hook 来获得 t 函数，该函数将帮助我们实现文本字符串的国际化。在这个例子中，t 函数会查找 i18next 的资源文件，然后使用键 greeting 返回美国英语的翻译字符串。
处理文本插值
在许多情况下，文本字符串需要包含参数。下面是一个典型的例子：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - -------------- - ---- ---------------- -------- --------- ---- -- - ----- - - - - ----------------- ------ ------------------ - ---- --------- - ------ ------- --------展开代码
在这个例子中，字符串 greeting 包含一个变量 name，因为 人名 在不同的语言和文化背景中可能具有不同的位置和格式。在这里，我们使用了 i18next 进行国际化，以便可以本地化格式化变量。
处理复数
大多数语言具有两种或更多复数形式。i18next 支持所有主要语言的复数规则。使用 t 函数的多条消息来包含一组可能的复数形式，以下是示例代码：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - -------------- - ---- ---------------- -------- ----------- ----- -- - ----- - - - - ----------------- ------ - ---- --------------- - ----- --- ----- -- - ------ ------- ----------展开代码
在 i18next 的资源文件中，需要将复数表述为连续的一系列短语。下面是一个翻译字符串 followers 的例子：
{ "followers": "{{count}} follower {{count, plural, one {is} other {are}}}." }
在这个使用资源文件中，参考的复数语法表达式是 count, plural, one {is} other {are}。这表示在我们需要处理复数时，i18next 将根据 count 参数的值选择正确的复数形式。
总结
本文介绍了国际化库 i18next 的使用。通过 i18next，我们可以更轻松地处理文本字符串的本地化和国际化。希望这篇文章能够帮助你入手使用 i18next 开发前端应用程序。
参考链接
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600673defb81d47349e53b9a
