使用Intl API格式化日期、数字和货币，结合i18next等库管理多语言文本，通过navigator.language检测用户语言，支持动态切换与持久化存储，实现全面的国际化与本地化。
实现国际化（i18n）和本地化（l10n）的核心是让应用能根据用户的语言环境显示对应的语言内容，并正确格式化日期、数字、货币等。JavaScript 提供了多种方式来实现这些功能，结合现代工具和库可以更高效地完成。
使用内置 Intl API 进行本地化格式化
现代浏览器支持 Intl 对象，它是 JavaScript 内置的国际化 API，可用于格式化日期、时间、数字和货币，无需引入第三方库。
• 格式化日期和时间：
new Intl.DateTimeFormat('zh-CN').format(new Date()) → "2025年4月5日"new Intl.DateTimeFormat('en-US').format(new Date()) → "4/5/2025"
new Intl.NumberFormat('de-DE').format(1234567.89) → "1.234.567,89"new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(1000) → "￥1,000"
['ä', 'z', 'a'].sort(new Intl.Collator('de').compare) → 按德语规则排序
管理多语言文本：使用 i18n 库或自定义方案
对于界面文本的翻译，可选择轻量方案或成熟库来组织和切换语言资源。
立即学习“Java免费学习笔记（深入）”；
• 使用 i18next（推荐用于中大型项目）：i18next 是最流行的 JavaScript 国际化库，支持动态加载、复数、插值等功能。
安装：npm install i18next
基本用法：
import i18n from 'i18next';
i18n.init({
lng: 'en', // 当前语言
resources: {
en: {
translation: {
welcome: 'Welcome',
hello: 'Hello {{name}}!'
}
},
zh: {
translation: {
welcome: '欢迎',
hello: '你好 {{name}}！'
}
}
}
});
// 使用
i18n.t('welcome'); // 根据当前语言返回对应文本
i18n.t('hello', { name: '小明' }); // 支持变量插值
• 简单项目可用对象映射实现：
如果项目较小，可直接用语言键值对：
const messages = {
en: {
title: 'Welcome',
save: 'Save'
},
zh: {
title: '欢迎',
save: '保存'
}
};
const lang = navigator.language.startsWith('zh') ? 'zh' : 'en';
document.getElementById('title').textContent = messages[lang].title;
检测用户语言并动态切换
获取用户首选语言可通过 navigator.language，并允许用户手动切换。
• 获取默认语言：const userLang = navigator.language || 'en'; // 如 'zh-CN' 或 'en-US'
i18n.changeLanguage('zh') → 动态切换为中文
可绑定按钮事件，切换后重新渲染页面文本
使用 localStorage 记住选择：localStorage.setItem('app-lang', 'zh')
页面加载时优先读取该设置
处理静态资源与动态内容
除了文本，图片、日期显示、数字单位等也需考虑本地化。
• 图片或文案按语言替换：例如注册页的引导图，可按语言目录加载：src="/images/guide-${lang}.png"
在 React 中可用 react-i18next，Vue 可用 vue-i18n，实现组件级语言响应。
基本上就这些。Intl API 解决格式问题，i18n 库管理翻译文本，再配合语言检测和持久化，就能构建完整的多语言支持。关键是统一管理资源，避免硬编码文本。不复杂但容易忽略细节，比如日期顺序和千分位符差异。
