## 布局问题 - 当你的用户使用阿拉伯语时，文档会从右到左显示。所以你需要调整文档的布局。 ```css html { direction: rtl; } ``` 如果你使用绝对定位属性，让元素在左侧，那么当你改变文档方向时，元素仍然停留在左侧。你需要将元素的位置调整到右侧。 ```css /* 之前，方向：从左到右 */ .element { position: absolute; left: 0; } /* 之后，方向：从右到左 */ .element { position: absolute; right: 0; } ``` - 不同语言的字符长度不同，所以你需要调整元素的宽度和高度。 ```javascript const en = "What's the weather like today?" const zh = "今天天气怎么样？" const ar = "ما هو الطقس اليوم ؟" const ja = "今日の天気はどうですか？" const ko = "오늘 날씨는 어때요?" const es = "¿Qué tiempo hace hoy?" const fr = "Quel temps fait-il aujourd'hui?" const de = "Wie ist das Wetter heute?" const it = "Che tempo fa oggi?" const pt = "Qual a temperatura hoje?" const nl = "Wat is de weer vandaag?" const pl = "Jakie jest pogoda dzisiaj?" const ro = "Ce vreme este azi?" const tr = "Bugün hava nasıl?" const vi = "Hôm nay thời tiết thế nào?" ``` - 不同国家有不同的价格格式例如，在巴西（pt-BR），价格使用逗号作为小数分隔符而不是句号/点： ``` // 美国/英国格式 $10.50 (使用小数点) // 巴西格式 R$ 10,50 (使用逗号作为小数分隔符) ``` - 显示折扣如果要显示促销价格，比如英文中的 35% off，在中文里面是 6.5 折。 ```javascript discount: t("{percent} off", { percent: 35, num: (100 - 35) / 10, // 6.5 }), ``` 然后再对应的翻译文件里增加: ``` // en.json "{percent} off": "{percent} off" // zh_CN.json "{percent} off": "{num} 折" ``` - 排序如果你要对一个包含中文/英文/日文等多语言的数组排序，不应该直接使用 Array.sort()，它只按 UTF-16 编码排序，结果会很混乱。例如： ``` ["Apple", "Google", "facebook", "阿里", "腾讯", "字节", "ソニー", "トヨタ", "任天堂"].sort() // ["Apple", "Google", "facebook", "ソニー", "トヨタ", "任天堂", "字節", "腾讯", "阿里"] ``` 所以需要使用 localeCompare： ``` function createStringSorter({ caseInsensitive = true, order = ["en", "zh", "ja"] } = {}) { const collator = new Intl.Collator("zh", { sensitivity: caseInsensitive ? "base" : "variant", }); const getGroup = (str) => { if (/^[\u3040-\u309f\u30a0-\u30ff]/.test(str)) return "ja"; if (/^[\u4e00-\u9fff]/.test(str)) return "zh"; return "en"; }; return (a, b) => { const groupA = getGroup(a); const groupB = getGroup(b); if (groupA !== groupB) { return order.indexOf(groupA) - order.indexOf(groupB); } return collator.compare(a, b); }; } const items = ["Apple", "Google", "facebook", "阿里", "腾讯", "字节", "ソニー", "トヨタ", "任天堂"]; // default: en → zh → ja items.sort(createStringSorter()); // ["Apple", "facebook", "Google", "阿里", "任天堂", "腾讯", "字节", "ソニー", "トヨタ"] // ja → zh → en items.sort(createStringSorter({ order: ["ja", "zh", "en"] })); ``` ## 文本转换不同语言的大小写转换规则不同。比如在土耳其语中，`i` 的大写是 `İ`（带点），而不是 `I`。 ```javascript "i".toUpperCase() // "I" ✗ "i".toLocaleUpperCase("tr") // "İ" ✓ ``` 所以需要转换大小写时，应使用 toLocaleUpperCase / toLocaleLowerCase 并传入正确的 locale： ``` ``` 注意：toLocaleUpperCase 要求 BCP 47 格式的语言标签（用连字符，如 zh-CN），但 i18next 使用下划线格式（如 zh_CN）。传入错误格式会导致页面崩溃： ``` "beta".toLocaleUpperCase("zh_CN") // ❌ RangeError: Incorrect locale information provided "beta".toLocaleUpperCase("zh_TW") // ❌ RangeError: Incorrect locale information provided "beta".toLocaleUpperCase("zh-CN") // ✅ "BETA" "beta".toLocaleUpperCase("zh-TW") // ✅ "BETA" ``` 传入前务必转换格式：i18n.language.replace("\_", "-")。或者 ``` i18next.init({ lng: "zh-CN", supportedLngs: ["en", "zh-CN", "zh-TW", "ja", "ko", "tr"], }); ``` ## 复数规则不同语言有不同的复数规则。例如： - 英语有两种形式：单数（1 minute）和复数（2 minutes） - 中文只有一种形式：1 分钟, 2 分钟 - 俄语有三种形式：1 минута, 2 минуты, 5 минут - 阿拉伯语有六种形式：0 دقيقة, 1 دقيقة, 2 دقيقة, 3-10 دقائق, 11-99 دقيقة, 100+ دقيقة 你可以使用像 `i18next` 这样的库来处理复数规则： ```javascript // 英语 i18next.t("key", { count: 1 }) // "1 minute" i18next.t("key", { count: 2 }) // "2 minutes" // 中文 i18next.t("key", { count: 1 }) // "1分钟" i18next.t("key", { count: 2 }) // "2分钟" // 俄语 i18next.t("key", { count: 1 }) // "1 минута" i18next.t("key", { count: 2 }) // "2 минуты" i18next.t("key", { count: 5 }) // "5 минут" ``` i18next 中的 `key` 是你的翻译字符串的唯一标识符。它就像一个变量名，映射到不同语言的不同翻译。它的工作原理如下： ```javascript // 翻译文件 // en.json { "time.minutes": { "one": "{{count}} minute", "other": "{{count}} minutes" } } // zh.json { "time.minutes": "{{count}}分钟" } // 使用 i18next.t('time.minutes', { count: 1 }); // 英语中显示 "1 minute"，中文中显示 "1分钟" i18next.t('time.minutes', { count: 2 }); // 英语中显示 "2 minutes"，中文中显示 "2分钟" ``` key 可以是： - 简单字符串：`"welcome"` - 嵌套路径：`"common.buttons.submit"` - 带有复数形式的 key：`"time.minutes"` 像 `one` 和 `other` 这样的复数形式是 i18next 用来处理不同复数规则的特殊 key： - `one`：用于单数形式（当 count 为 1 时） - `other`：用于复数形式（当 count 为 0 或 > 1 时）有些语言有更多的复数形式。例如，在俄语中： ```javascript // ru.json { "time.minutes": { "one": "{{count}} минута", // 1 "few": "{{count}} минуты", // 2-4 "many": "{{count}} минут", // 5-20 "other": "{{count}} минуты" // 21, 22, 25-30, etc. } } ``` 复数规则基于 [CLDR（通用区域设置数据存储库）](https://cldr.unicode.org/) 规范，该规范定义了不同语言的复数规则。i18next 根据计数和当前语言的规则自动选择正确的形式。如果你的翻译文件不支持嵌套结构，你有一个简单的解决方案： ``` minute > 1 ? t("{num} minutes) : t("{num} minute) ``` 但这种方法有几个问题： 1. 它不适用于具有两个以上复数形式的语言（如俄语、阿拉伯语等） 2. 它在许多语言中不能正确处理零 3. 它不可维护 - 你需要在每个需要复数形式的地方编写这个逻辑 4. 它不遵循 CLDR 标准，这意味着你的翻译可能是错误的 5. 它使翻译人员更难使用你的翻译文件例如，在俄语中： ```javascript // 错误的方法 minute > 1 ? t("{num} минут") : t("{num} минута") // 这对于以下情况是错误的： // 2-4 分钟（应该是 "минуты"） // 5-20 分钟（应该是 "минут"） // 21, 22, 25-30 分钟（应该是 "минуты"） ``` 这就是为什么最好使用 i18next 的内置复数处理： ## 政策问题 - 出于法律原因，在土耳其不要显示删除线价格由于土耳其政府的规定，我们不能在产品页面上显示删除线价格。例如，如果你有一个原价为 100 TL、折扣价为 80 TL 的产品，你不能将其显示为 100 TL → 80 TL。你需要将其显示为 80 TL。 ```html 80 ~~100 ₺~~ ```