企业出海：前端国际化之从基础到自动语言切换

企业出海：前端国际化之从基础到自动语言切换

国际化基础概念

国际化（i18n）指产品设计时适应不同语言和地区需求。前端国际化需处理文本翻译、日期/货币格式、布局调整等核心问题。

常用工具包括：

• i18next：JavaScript国际化框架，支持React、Vue等主流框架。
• react-i18next：React生态的i18next集成库。
• Intl：原生API，处理日期、数字格式化。

静态文本翻译实现

通过键值对映射实现多语言文本切换。以下为React项目示例：

语言资源文件（en.json）

{
  "welcome": "Welcome to our platform",
  "button": {
    "submit": "Submit"
  }
}

React组件中使用

import { useTranslation } from 'react-i18next';

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

动态参数与复数处理

支持插值参数和复数形式，需在语言文件中定义规则：

语言文件（en.json）

{
  "items": "{{count}} item",
  "items_plural": "{{count}} items"
}

组件中使用

<p>{t('items', { count: 5 })}</p> // 输出 "5 items"

自动语言切换逻辑

通过浏览器语言或用户偏好自动切换语言，结合本地存储（localStorage）保存用户选择。

检测浏览器语言并初始化

import i18n from 'i18next';

i18n.init({
  lng: localStorage.getItem('userLanguage') || navigator.language,
  fallbackLng: 'en',
  resources: {
    en: { translation: require('./locales/en.json') },
    zh: { translation: require('./locales/zh.json') }
  }
});

语言切换组件

function LanguageSwitcher() {
  const { i18n } = useTranslation();
  const changeLanguage = (lng) => {
    i18n.changeLanguage(lng);
    localStorage.setItem('userLanguage', lng);
  };

  return (
    <select onChange={(e) => changeLanguage(e.target.value)}>
      <option value="en">English</option>
      <option value="zh">中文</option>
    </select>
  );
}

日期与数字本地化

使用IntlAPI实现区域化格式：

日期格式化

const date = new Date();
console.log(new Intl.DateTimeFormat('zh-CN').format(date)); // 输出 "2023/10/5"

货币格式化

console.log(new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'EUR'
}).format(1234.5)); // 输出 "1.234,50 €"

自动化工具链集成

结合构建工具（如Webpack）实现自动化语言文件加载：

Webpack配置示例

const languages = ['en', 'zh'];
module.exports = {
  plugins: languages.map(lang => new CopyPlugin({
    patterns: [{ from: `locales/${lang}.json`, to: `locales/${lang}.json` }]
  }))
};

总结

前端国际化需系统化处理文本、格式与交互逻辑。通过工具链整合和自动化检测，可显著提升多语言场景下的开发效率与用户体验。