JavaScript通过Intl对象实现国际化,支持日期、数字、货币及排序本地化;结合语言包或i18next库可完成多语言翻译,适配用户地区偏好,提升全球用户体验。

JavaScript中的国际化(i18n)和本地化(l10n)是构建面向全球用户应用的重要部分。国际化是指让程序支持多种语言和地区格式的能力,而本地化则是将程序内容适配到特定语言或地区的具体实现,比如翻译文本、调整日期格式、货币显示等。
使用内置API:Intl对象
现代JavaScript提供了强大的Intl对象,用于处理日期、时间、数字、排序等的本地化格式化。它无需引入第三方库,兼容性良好,适用于大多数场景。
日期与时间格式化:
const date = new Date();const options = { year: 'numeric', month: 'long', day: 'numeric' };
console.log(new Intl.DateTimeFormat('zh-CN', options).format(date)); // 中文格式:2025年3月24日
console.log(new Intl.DateTimeFormat('en-US', options).format(date)); // 英文格式:March 24, 2025
数字与货币格式化:
立即学习“Java免费学习笔记(深入)”;
const number = 123456.789;console.log(new Intl.NumberFormat('de-DE').format(number)); // 德语格式:123.456,789
console.log(new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(5000)); // 日元:¥5,000
字符串排序(语言敏感排序):
const names = ['äpfel', 'Zebra', 'Apfel', 'zebra'];console.log(names.sort(new Intl.Collator('de').compare)); // 按德语规则排序
多语言文本翻译(i18n)
对于界面文本的翻译,可以使用简单的键值映射结构管理不同语言包。
定义语言资源:
'en': {
'greeting': 'Hello',
'welcome': 'Welcome to our app'
},
'zh-CN': {
'greeting': '你好',
'welcome': '欢迎使用我们的应用'
}
};
根据用户语言选择对应文本:
function t(key, locale = 'en') {return messages[locale]?.[key] || messages['en'][key];
}
console.log(t('greeting', 'zh-CN')); // 输出:你好
实际项目中可结合浏览器语言检测:
const userLang = navigator.language || 'en';
const currentLocale = userLang.startsWith('zh') ? 'zh-CN' : 'en';
使用第三方库(如 i18next)
对于复杂应用,推荐使用成熟的i18n库,例如 i18next,它支持动态加载语言包、复数形式、插件扩展等高级功能。
安装:
npm install i18next基本使用:
import i18n from 'i18next';i18n.init({
lng: 'zh-CN',
resources: {
'zh-CN': { translation: { greeting: '你好' } },
'en': { translation: { greeting: 'Hello' } }
}
});
console.log(i18n.t('greeting')); // 根据当前语言输出
时区与夏令时处理
Intl.DateTimeFormat 也支持时区设置:
const time = new Date();const formatter = new Intl.DateTimeFormat('en-US', {
timeZone: 'America/New_York',
hour: '2-digit',
minute: '2-digit'
});
console.log(formatter.format(time));
注意:时区名称需准确,可通过 Intl.supportedValuesOf('timeZone') 查看支持列表。











