返回文章

国际化与本地化

1 分钟阅读时间
i18nWeb开发
Edit

国际化（i18n）和本地化（l10n）是现代前端开发中不可或缺的一部分，尤其是在全球化背景下。本文将从 国际化的核心问题、CLDR 的使用、RTL 布局的处理 以及 前端的价值体现 等方面展开讨论，并提供详细的说明和代码示例。

目录

  1. 前言
  2. 国际化的核心问题
  3. RTL 布局处理
  4. 前端的价值体现
  5. 附录

前言

国际化（i18n）是指在技术层面上实现应用的全球化能力，而本地化（l10n）则是针对特定区域或语言环境提供的定制化服务。国际化涉及多个核心问题，包括多语言支持、CLDR 数据的使用、中东地区的 RTL 布局处理，以及全球监控和优化。

国际化的核心问题

多语言支持

多语言支持是国际化的基础，主要包括以下内容：

  • 文本翻译：通过资源文件（如 JSON 或 PO 文件）管理不同语言的文本。
  • 动态加载：根据用户的语言环境动态加载对应的资源文件。
  • 占位符处理：支持动态插入变量的文本格式化，例如 Hello, {name}。

CLDR 数据

CLDR（Common Locale Data Repository）是 Unicode 提供的一套标准化的区域数据，用于支持日期、时间、数字、货币等的本地化显示。

常见用途

  • 日期和时间格式化：根据不同的地区显示符合当地习惯的日期和时间格式。
  • 数字和货币格式化：支持千分位分隔符、小数点符号、货币符号等的本地化。
  • 排序规则：根据语言环境提供正确的字符串排序方式。

示例资源

RTL 布局处理

RTL（Right-to-Left）布局是中东地区（如阿拉伯语、希伯来语）常用的文本方向。处理 RTL 布局需要注意以下几点：

判断 RTL

可以通过以下方式判断当前文档是否为 RTL：

const isRTL = document.dir === 'rtl';

设置 RTL 布局

需要手动设置元素的 direction 属性为 rtl，以调整文本方向：

body {
  direction: rtl;
}

样式调整

  • 间距处理：将左间距（如 padding-left 和 margin-left）改为右间距（如 padding-right 和 margin-right）。
  • 绝对定位：绝对定位的元素不会自动调整位置，需要手动修改 left 为 right。
  • 图片方向：图片不会自动翻转，需要根据需求手动调整。

注意事项

  • 阿拉伯语文本会自动右对齐，但绝对定位的元素位置不会变化。
  • 图片和其他非文本内容的方向不会自动调整，需额外处理。

前端的价值体现

前端开发在国际化和本地化中的价值主要体现在以下两个方面：

1. UI 组件库

复杂的中后台 UI 组件库具有很高的价值，特别是针对国际化的组件库。这些组件可以单独产出并复用，提升开发效率。

国际化组件的特点

  • 支持多语言切换。
  • 兼容 RTL 布局。
  • 提供本地化的日期、时间、数字等格式化功能。

2. 工程原子能力

工程化的原子能力是前端开发的重要基础，例如：

  • npm2umd：将 NPM 包转换为 UMD 格式，方便在浏览器环境中直接使用。
  • 构建工具：支持多语言资源的打包和动态加载。
  • 性能优化：通过代码分割和懒加载提升国际化应用的性能。

附录

CLDR 资源

RTL 示例代码

以下是一个简单的 RTL 布局示例：

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <style>
    body {
      direction: rtl;
      text-align: right;
    }
    .box {
      padding-right: 20px;
      margin-right: 10px;
    }
  </style>
</head>
<body>
  <div class="box">مرحبًا بالعالم</div>
</body>
</html>

国际化的性能分析

国际站点，性能测试的时候本地ttfb是不准的，因为本地是中国，无法模拟国外比如美国的环境。需要看报表。

区域化路由

账号的区域化路由优先级比ip代理的优先级更高。 登陆账号后，会根据账号（一般是cookie的国家）做区域化路由。仅代理ip可能走不到预发环境。建议退出账号。

References