i18next指南

i18next是一個官方支持超過50種語言的JavaScript本地化庫，它基於ECMA-402標準進行開發。它不僅提供簡單的文本翻譯，還可對鍵 / 值對進行國際化和本地化。下面將對i18next進行詳細闡述。

一、安裝和配置

1.安裝

i18next通過NPM進行安裝，我們可以使用以下命令進行安裝：

npm install i18next

2.配置

以下是一個簡單的i18next配置示例：

//引入i18next和語言
import i18n from 'i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

//設置相關內容
i18n
  .use(LanguageDetector)
  .init({
    resources: {
      en: {
        translation: {
          "key": "hello world"
        }
      }
    }
  });

i18next首先使用語言檢測器來確定瀏覽器標頭中收到的語言。然後，它將載入應用程序中提供的資源的特定語言版本。

二、使用i18next進行文本翻譯

1.基礎用法

以下是i18next的最基本的用法示例：

//引入i18next和使用方法
import i18n from 'i18next';

console.log(i18n.t('key')); //"hello world"

i18next使用簡單的鍵值對進行翻譯。如前面所示的配置示例中，「key」是一個用於文本翻譯的鍵。

2.使用變數

以下是使用i18next進行變數替換的示例：

let name = 'John';

console.log(i18n.t('greeting', {name: name})); //"Hello, John"

在調用t函數時，可以傳遞一個包含需要在字元串中替換的變數的對象。

3.使用react-i18next進行React組件的本地化

以下是在React項目中使用react-i18next進行組件本地化的示例：

//引入react-i18next
import { useTranslation } from 'react-i18next';

function MyComponent() {
  const { t } = useTranslation();

  return (
    <div>
      <h1>{t('welcome.title')}</h1>
      <p>{t('welcome.message')}</p>
    </div>
  );
}

React組件中，我們可以使用useTranslation hook實現簡單的文本翻譯。

三、高級用法

1.多語言處理

以下是將中文和英文作為多個語言進行處理的示例：

import i18n from 'i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import ch from './locales/zh-CN';
import en from './locales/en-US';

i18n
  .use(LanguageDetector)
  .init({
    resources: {
      'zh-CN': {
        translation: ch
      },
      'en-US': {
        translation: en
      }
    }
  });

多語言處理可以通過為每種語言提供一個資源文件來實現。在此示例中，資源文件分別為zh-CN和en-US。

2.使用命名空間

以下是使用命名空間對鍵 / 值對進行組織的示例：

import i18n from "i18next";

i18n.init({
  resources: {
    en: {
      common: {
        'tree': 'tree',
        'car': 'car'
      }
    },
    de: {
      common: {
        'tree': 'Baum',
        'car': 'Auto'
      }
    }
  },
  ns: ['common'],
  defaultNS: 'common'
});

console.log(i18n.t('tree')); //"tree"
console.log(i18n.t('car')); //"car"

命名空間可以幫助組織鍵 / 值對，以便它們在應用程序的不同部分中更容易地管理。

3.使用Pluralization

以下是使用i18next進行Pluralization的示例：

import i18next from 'i18next';

i18next
  .init({
    lng: "en",
    resources: {
      en: {
        translation: {
          "cars": {
            "zero": "There are no cars.",
            "one": "There is one car.",
            "other": "There are {{count}} cars."
          }
        }
      }
    }
  });

console.log(i18next.t('cars', {count: 0})); //"There are no cars."
console.log(i18next.t('cars', {count: 1})); //"There is one car."
console.log(i18next.t('cars', {count: 5})); //"There are 5 cars."

i18next支持Pluralization，即根據數字的不同進行文本處理。

總結

i18next是一個強大的JavaScript本地化庫，可用於將應用程序本地化到50多種語言。本文從安裝和配置、文本翻譯、高級用法等多個方面對i18next進行了詳細的闡述。使用i18next可以輕鬆地為您的應用程序提供多語言支持。