Intl 仅负责格式化（日期、数字、货币、排序），不处理翻译；需自行管理翻译资源，并结合 Intl.Locale 等 API 实现本地化渲染。
JavaScript 的国际化 API 是 Intl，但它只负责**格式化**（日期、数字、货币、排序），不负责**翻译内容**。想实现多语言网站，你得自己管理翻译资源，并用 Intl 配合语言环境做本地化渲染。
怎么用 Intl 格式化日期、数字和消息？
Intl 提供 DateTimeFormat、NumberFormat、PluralRules 和 RelativeTimeFormat 等构造器，但最常用且易踩坑的是 Intl.Locale 和 Intl.MessageFormat（注意：后者不是原生 API，是 @formatjs/intl-messageformat 库）。
原生 Intl 不支持动态翻译字符串（比如把 "Hello" 变成 "Hola"），它只管“同一句话在不同语言下怎么显示得对”。例如：
const date = new Date(2024, 0, 15);
console.log(new Intl.DateTimeFormat('zh-CN').format(date)); // "2024年1月15日"
console.log(new Intl.DateTimeFormat('es-ES').format(date)); // "15/1/2024"
-
Intl构造器第一个参数是locale，可以是字符串如'en-US'或Intl.Locale实例 -
浏览器可能不支持你传的 locale（比如传
'pt-BR'但用户浏览器没装葡萄牙语包），此时会回退到language子标签或默认语言，不会报错但结果可能不符合预期 -
Intl.NumberFormat('ar-EG')对阿拉伯语数字默认仍输出 ASCII 数字（0–9），要显示真正的阿拉伯-印度数字需显式加{ useGrouping: false, notation: 'standard' }并确认字体支持
怎么加载和切换翻译资源？
没有统一标准，但主流做法是：按语言拆分 JSON 文件，运行时根据 navigator.language 或用户选择加载对应资源。关键点不在“怎么存”，而在“怎么避免阻塞渲染”和“怎么热更新”。
立即学习“Java免费学习笔记（深入）”；
常见错误是直接 fetch('/i18n/en.json').then(...) 后再渲染页面，导致首屏空白或闪动。推荐方式：
- 服务端提前注入初始语言资源（如内联
<script>window.I18N = {...}</script>），前端直接用 - 用
import()动态导入：const messages = await import(`./locales/${lang}.json`)，注意 Webpack/Vite 对这种写法有静态分析限制 - 避免在 React/Vue 组件里重复请求同一份语言包——用单例缓存，比如
const cache = new Map(); cache.get(lang) || fetch(...)
怎么让 DOM 文本随语言切换实时更新？
不能靠全局搜索替换 textContent，容易误伤 input 值、aria-label 或第三方组件内部文本。可靠做法是：给需要翻译的节点加标记，再集中处理。
例如用 data-i18n 属性：
<p data-i18n="welcome_message">Welcome</p> <button data-i18n="submit_btn">Submit</button>
然后写一个简单同步函数：
function updateI18n(lang) {
const messages = window.I18N[lang] || window.I18N['en'];
document.querySelectorAll('[data-i18n]').forEach(el => {
const key = el.getAttribute('data-i18n');
if (messages[key]) {
// 区分 textContent 和 placeholder/alt 等属性
if (el.hasAttribute('placeholder')) {
el.placeholder = messages[key];
} else if (el.hasAttribute('alt')) {
el.alt = messages[key];
} else {
el.textContent = messages[key];
}
}
});
}
- 别用
innerHTML渲染翻译内容，除非你明确信任所有翻译字段（XSS 风险） - 如果用了 React，就不要手动操作 DOM；改用
useEffect+useContext或库如react-i18next，否则状态和 DOM 易不同步 - 语言切换后，记得触发
Intl相关格式器重建（比如新的Intl.DateTimeFormat(lang)），不然日期仍按旧 locale 格式化
真正难的不是“怎么切语言”，而是“怎么让时间格式、数字分隔符、文字顺序（LTR/RTL）、复数规则、性别词形变化全都自动适配”，这些细节藏在 Intl 的选项里，不查文档很容易漏掉。比如阿拉伯语 RTL 页面，光改文字不够，还得改 CSS 的 direction 和 text-align，而这个和 JS 国际化是两套事。
