npm 包 i18next 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

i18next 是一个广泛使用的国际化 (i18n) 库，它可以帮助我们将应用程序本地化为不同的语言和地区。本文将介绍如何在前端项目中使用 i18next。

安装

# 使用 npm
npm install i18next

# 使用 yarn
yarn add i18next

如何使用

初始化 i18next

在使用 i18next 之前，需要先进行初始化。

import i18next from 'i18next';
import { initReactI18next } from 'react-i18next';

i18next.use(initReactI18next).init({
  lng: 'en',
  fallbackLng: 'en',
  resources: {
    en: {
      translation: {
        greeting: 'Hello world!',
      },
    },
  },
});

上述代码会创建一个 i18next 实例，并设置语言为英语（lng）和默认的语言回退（fallbackLng）。资源文件（resources）是一个相当重要的概念，它包含可以转换文本字符串的不同语言和地区。

在上面的代码例子中，只有一个 en 的资源文件。在 en 资源文件中，存在一个翻译文本字符串 greeting。在实际使用中，我们会根据需要添加更多的资源文件。

在组件中使用

import React from 'react';
import { useTranslation } from 'react-i18next';

function App() {
  const { t } = useTranslation();
  return <h1>{t('greeting')}</h1>;
}

export default App;

在使用组件中，我们需要使用 useTranslation hook 来获得 t 函数，该函数将帮助我们实现文本字符串的国际化。在这个例子中，t 函数会查找 i18next 的资源文件，然后使用键 greeting 返回美国英语的翻译字符串。

处理文本插值

在许多情况下，文本字符串需要包含参数。下面是一个典型的例子：

import React from 'react';
import { useTranslation } from 'react-i18next';

function Welcome({ name }) {
  const { t } = useTranslation();
  return <h1>{t('greeting', { name })}</h1>;
}

export default Welcome;

在这个例子中，字符串 greeting 包含一个变量 name，因为 人名 在不同的语言和文化背景中可能具有不同的位置和格式。在这里，我们使用了 i18next 进行国际化，以便可以本地化格式化变量。

处理复数

大多数语言具有两种或更多复数形式。i18next 支持所有主要语言的复数规则。使用 t 函数的多条消息来包含一组可能的复数形式，以下是示例代码：

import React from 'react';
import { useTranslation } from 'react-i18next';

function Followers({ count }) {
  const { t } = useTranslation();
  return (
    <h1>
      {t('followers', { count })}
    </h1>
  );
}

export default Followers;

在 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