Web 应用程序国际化 (i18n)

国际化：让您的网站说多种语言

国际化 (i18n) 是一种设计网站的做法，使其能够适应不同的语言和地区。一个良好国际化的网站可以在不重写代码的情况下翻译成新的语言，并且能够为每个区域正确处理日期格式、货币和文本方向等问题。

将文本与代码分离

国际化的基本原则是永远不要硬编码文本。与其在模板中直接写“欢迎”，不如使用像 t('welcome') 这样的函数来查找当前语言的翻译。翻译存储在单独的文件中，每种语言一个文件，因此添加新语言只需添加一个新的翻译文件。

翻译文件通常是 JSON 对象，每个字符串都有一个键。英文文件可能有 'welcome': 'Welcome'，意大利语文件则有 'welcome': 'Benvenuto'。这种分离意味着翻译人员可以在不接触代码的情况下处理翻译文件。

处理复数和变量

简单的文本替换是不够的。不同的语言有不同的复数规则。英语有两种形式（单数、复数），但阿拉伯语有六种，而日语基本上只有一种。一个好的 i18n 库会自动处理这个问题——您为每种复数形式指定翻译，库会根据数量选择正确的那个。

翻译中的变量也因语言而异。在英语中，您可能会说“Hello, {name}”——变量出现在特定位置。在其他语言中，词序可能不同。一个好的库通过允许命名占位符并让翻译人员根据需要重新排列它们来处理这个问题。

日期、数字和货币

不同地区对日期、数字和货币的格式不同。美国人写 04/01/2024（4月1日），欧洲人写 01/04/2024，日本人写 2024/04/01。数字使用不同的分隔符：美国是 1,234.56，而欧洲大部分地区是 1.234,56。货币有不同的符号和不同的放置规则。

现代浏览器内置的 Intl API 处理所有这些。Intl.DateTimeFormat、Intl.NumberFormat 和 Intl.RelativeTimeFormat 会根据用户的区域设置正确格式化日期、数字和相对时间。您不需要为此使用库——浏览器会处理。

文本方向和布局

并非所有语言都是从左到右阅读的。阿拉伯语、希伯来语、波斯语和乌尔都语是从右到左书写的。您的布局需要处理这一点——文本应该从右到左流动，并且 UI 应该相应地镜像。CSS 具有逻辑属性（margin-inline-start、padding-inline-end），可以自动适应文本方向，因此您不需要为从左到右和从右到左分别设置样式表。

流行的 i18n 库

对于 JavaScript 项目，最流行的库是 i18next。它与框架无关，但具有 React、Vue 和其他框架的集成。它处理复数化、插值、格式化等。对于 React 来说，react-intl 和 react-i18next 是流行的选择。关键是选择一个库并尽早集成——将 i18n 改造到现有应用程序中比从一开始就构建它要困难得多。