Skip to content

中英文翻译实现文档

简介

项目需要支持国际化和多语言，那么中英文翻译是不可缺少的一部分。

本文档仅从前端角度分析实现翻译的原理，并不处理中英文文案具体翻译。

实现细节

技术选型

项目使用第三方库 react-intl-universal 实现国际化。

基本原理是为每种语言准备翻译字典，组件根据当前语言通过 key 查询对应文案。以下为简化示例：

const zh_dict = {
  apple: "苹果",
  orange: "橘子",
  lemon: "柠檬",
};

const en_dict = {
  apple: "Apple",
  orange: "Orange",
  lemon: "Lemon",
};

const env = "en";
function translate(str) {
  const dict = env === "en" ? en_dict : zh_dict;
  return dict[str] || "";
}

// use in component
translate("apple");

模块实现

以下示例展示模块的基本配置方式：

  1. 安装第三方库：
"react-intl-universal": "2.7.5",
  1. 初始化翻译：

新建 /src/locale/index.js 并初始化翻译配置

import intl from "react-intl-universal";
import cookie from "react-cookies";
import en from "./en.js";
import zhCN from "./zh_CN";

// App locale data {"en-US":{"key1":"value1"},"zh-CN":{"key1":"值1"}}
const locales = {
  en,
  "zh-cn": zhCN,
};

// 语言标识必须与 locales 中的 key 一致。
const currentLocale = cookie.load("lang") || "en";

// if a key is not found, use this locale
const fallbackLocale = "en";

// Initialize properties and load CLDR locale data according to currentLocale
intl.init({
  locales,
  currentLocale,
  fallbackLocale,
});
  1. 在项目中翻译字符串：

根组件中执行翻译脚本

// app.js, init language
import "./locale/index.js";

在子组件中获取翻译后的字符串

import intl from "react-intl-universal";

let responseText = intl.get("Welcome_to_use");
  1. 切换语言环境：

界面右上角增加一个 Select 组件，可以切换中英文。

切换后，将选择的语言写入 Cookie，再刷新界面以重新初始化翻译。

import cookie from "react-cookies";

onChange = (selectedLang) => {
  const lang = cookie.load("lang");
  if (lang !== selectedLang) {
    cookie.save("lang", selectedLang);
    location.reload();
  }
};

初始化时从 Cookie 读取语言，并确保该值与 locales 中配置的语言标识一致。

版本历史

1.4 版本支持国际化。

参考文献