前端国际化需分离语言资源并按需加载，利用 navigator.language 检测用户偏好，动态导入对应 JSON 语言包（如 zh.json），结合 fetch 或 import() 实现；使用 Intl API 格式化日期、数字、货币等，如 new Intl.DateTimeFormat('zh-CN') 和 new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' })；复杂项目可集成 i18next 管理多语言，支持插件加载、占位符替换和框架绑定，提升维护性。
前端国际化不是简单地替换文字，而是让应用能灵活适应不同语言、地区和格式习惯。JavaScript生态提供了成熟的方案来实现多语言动态加载与内容格式化，核心在于按需加载语言包和正确处理日期、数字、货币等本地化显示。
动态加载语言资源
为避免初始加载所有语言造成性能浪费，应按用户选择或浏览器设置动态导入对应语言文件。
常见做法是将每种语言的翻译文本放在独立的JSON文件中，如 zh.json、en.json，通过异步请求或ES模块动态引入。
- 检测用户语言偏好：使用 navigator.language 获取浏览器默认语言
- 根据语言代码（如 'zh-CN'、'en-US'）映射到对应资源文件
- 使用 import() 动态导入模块，或 fetch 请求JSON数据
- 缓存已加载的语言包，避免重复请求
示例：
立即学习“Java免费学习笔记（深入）”；
async function loadLocale(lang) {
const response = await fetch(`/locales/${lang}.json`);
return response.json();
}
使用Intl API进行格式化
JavaScript内置的 Intl 对象提供强大本地化能力，无需依赖大型库即可处理常见格式。
它支持数字、日期时间、货币、相对时间等格式化，自动遵循区域规则。
- 日期时间格式化：new Intl.DateTimeFormat('zh-CN').format(date)
- 数字与货币：new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' })
- 相对时间：Intl.RelativeTimeFormat 可输出“昨天”、“2分钟前”等人性化文本
这些API会根据传入的语言和地区自动调整显示方式，比如中文用“年/月/日”，英文用“Month Day, Year”。
集成i18next或类似工具
对于复杂项目，推荐使用 i18next 这类成熟库，它支持插件扩展，可轻松实现语言切换、复数形式、占位符替换等功能。
配合 i18next-http-backend 插件，能自动按需加载语言JSON文件。
- 初始化时配置默认语言和加载路径
- 调用 t('key') 函数获取翻译文本
- 支持嵌套结构、变量注入（如 t('welcome', { name: 'Tom' })）
- 可结合React、Vue等框架使用对应绑定库
基本上就这些。关键在于分离语言资源、按需加载，并善用原生API做格式处理。结构清晰了，维护多语言就不复杂但容易忽略细节。
