i18next

特点

• 全面的国际化支持：支持字符串翻译、日期和时间格式化、数字格式化等多种国际化需求。
• 插件系统：通过插件扩展功能，包括缓存、后端加载、多语言检测等。
• 易于集成：与 React、Vue.js、Angular 等前端框架无缝集成。
• 丰富的 API：提供多种方法和配置选项，以满足各种复杂的国际化需求。
• 异步加载：支持异步加载翻译文件，提升应用性能。
• 社区支持：活跃的社区和丰富的文档资源，方便开发者学习和使用。

使用场景

• 多语言网站：需要支持多种语言的静态或动态网站。
• 移动应用：使用 React Native 或其他框架开发的移动应用。
• 桌面应用：基于 Electron 或 NW.js 开发的跨平台桌面应用。
• 企业应用：需要处理大量国际化需求的企业级应用程序。

安装方式

npm 安装

npm install i18next

yarn 安装

yarn add i18next

使用示例

初始化 i18next

import i18next from 'i18next';

i18next.init({
  lng: 'en',
  resources: {
    en: {
      translation: {
        "welcome": "Welcome to our application"
      }
    },
    fr: {
      translation: {
        "welcome": "Bienvenue dans notre application"
      }
    }
  }
});

console.log(i18next.t('welcome')); // 输出: Welcome to our application

与 React 集成

import React from 'react';
import ReactDOM from 'react-dom';
import { useTranslation, initReactI18next } from 'react-i18next';
import i18next from 'i18next';

i18next.use(initReactI18next).init({
  lng: 'en',
  resources: {
    en: {
      translation: {
        "welcome": "Welcome to our application"
      }
    },
    fr: {
      translation: {
        "welcome": "Bienvenue dans notre application"
      }
    }
  }
});

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

ReactDOM.render(<App />, document.getElementById('root'));

常用 API 介绍

• i18next.init(options, callback)：初始化 i18next 实例。
  • options：配置选项，包括语言、资源、后端等。
  • callback：初始化完成后的回调函数。
• i18next.t(key, options)：获取翻译字符串。
  • key：翻译字符串的键。
  • options：可选参数，如占位符、上下文等。
• i18next.changeLanguage(lng, callback)：切换当前语言。
  • lng：新语言的代码。
  • callback：语言切换完成后的回调函数。
• i18next.loadNamespaces(namespaces, callback)：加载命名空间。
  • namespaces：命名空间列表。
  • callback：加载完成后的回调函数。
• i18next.addResourceBundle(lng, ns, resources, deep, overwrite)：添加资源包。
  • lng：语言代码。
  • ns：命名空间。
  • resources：资源对象。
  • deep：是否深度合并。
  • overwrite：是否覆盖现有资源。

高级用法

使用中间件

i18next 支持多种中间件，可以扩展功能，例如缓存、后端加载等。以下是使用 i18next-http-backend 的示例：

import i18next from 'i18next';
import HttpBackend from 'i18next-http-backend';

i18next.use(HttpBackend).init({
  lng: 'en',
  backend: {
    loadPath: '/locales/{{lng}}/{{ns}}.json'
  }
});

自定义格式化

可以通过 i18next.format 选项自定义翻译结果的格式化。例如，自定义日期格式：

i18next.init({
  lng: 'en',
  resources: {
    en: {
      translation: {
        "date": "Today's date is {{date, MM/DD/YYYY}}"
      }
    }
  },
  interpolation: {
    format: function(value, format, lng) {
      if (format === 'MM/DD/YYYY') {
        return new Intl.DateTimeFormat('en-US').format(value);
      }
      return value;
    }
  }
});

console.log(i18next.t('date', { date: new Date() }));

官方资料

• i18next 官方网站
• GitHub 仓库