Skip to content

中英文翻译实现文档

简介

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

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

实现细节

技术选型

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

翻译原理：准备不同语言的翻译字典（对象），当某个组件内部调用翻译函数时，从翻译字典中找出对应的结果，返回到组件内部即可实现。不同语言环境下使用不同的翻译字典。伪代码如下：

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");

模块实现

模块实现，包括各个模块的功能和实现细节等。

0、安装第三方库

"react-intl-universal": "2.7.5",

1、初始化翻译

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

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

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

// Current locale such as 'en-US'
const currentLocale = "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({
  currentLocale,
  locales,
  currentLocale,
});

2、项目中翻译字符串

根组件中执行翻译脚本

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

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

import intl from "react-intl-universal";

let responseText = intl.get("Welcome_to_use");

3、切换语言环境

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

切换后，将选择的语言写入本地浏览器存储 cookie 中，然后刷新界面。

import cookie from "react-cookies";

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

刷新后，重新初始化翻译时，从浏览器本地获取语言环境，设置为 currentLocale。

const currentLocale = cookie.load("lang") || "en";

版本历史

1.4 版本支持国际化。

参考文献