前端国际化需要考虑哪些问题?

先理解原理和示例,再练习完整口述与追问。

文案抽离为语言包并按需懒加载;用 vue-i18n、react-i18next 等处理插值与复数;日期、数字、货币、相对时间用 Intl API 按地区格式化;时间统一以 UTC 存储、按用户时区展示;支持阿拉伯语等从右到左布局;语言选择根据 URL、用户设置和 Accept-Language 决定,SSR 需输出 lang 与 hreflang。

不同语言的复数规则不同:英语分单复数,阿拉伯语有六种,中文不区分;Intl.PluralRules 返回 zero、one、two、few、many、other 类别,ICU 消息格式据此选择文案。字符串拼接会破坏语序,应使用带占位符的完整句子。文案长度差异大(德语往往比英语长),布局要能自适应。

Intl.DateTimeFormat、Intl.NumberFormat、Intl.RelativeTimeFormat 可替代大量手写格式化;货币还需要明确币种,金额计算用整数分或 decimal 库避免浮点误差。RTL 布局在 <html dir="rtl"> 下,使用 margin-inline-start 这类逻辑属性可自动翻转,图标方向也要检查。

js
const price = new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(1234.5) // "1.234,50 €"
const date = new Intl.DateTimeFormat('zh-CN', { dateStyle: 'long', timeZone: 'Asia/Shanghai' }).format(new Date())
const rule = new Intl.PluralRules('en-US').select(1) // "one"
const ago = new Intl.RelativeTimeFormat('zh-CN', { numeric: 'auto' }).format(-1, 'day') // "昨天"

语言包按路由或语言懒加载:切换语言时先 await import('./locales/' + lang + '.json'),加载完成后再更新 locale,避免首包包含所有语言。

把用户可见的文案写在后端错误信息里,前端无法翻译,接口应返回错误码;图片中的文字、排序规则(Intl.Collator)、输入法和字体也容易遗漏。

国际化我会从几方面做:文案抽成语言包并按语言懒加载,用 i18n 库处理插值和复数,不做字符串拼接;日期、数字、货币、相对时间用 Intl API 按地区格式化;时间以 UTC 存储、按用户时区展示;支持 RTL 时用逻辑属性布局;接口返回错误码而不是中文文案;语言来源按 URL、用户设置和浏览器语言确定,SSR 输出 lang 和 hreflang。