答案：实现轻量级JavaScript国际化库，支持多语言管理、动态插值及日期数字货币格式化。1. 定义嵌套语言包，通过ResourceManager加载切换语言；2. 使用正则解析模板占位符，调用formatValue按类型格式化；3. I18n类整合资源与格式化逻辑，提供t方法翻译文本；4. 可扩展复数、ICU语法、异步加载等特性。
实现一个轻量级的 JavaScript 国际化（i18n）格式化库，核心是支持多语言文本管理、动态插值、日期/数字/货币格式化，并具备良好的扩展性。下面是一个实用且结构清晰的实现思路。
1. 定义语言包与资源管理
国际化库的基础是语言资源。将不同语言的翻译内容组织成嵌套对象，便于按模块或页面划分。
示例语言包：
{
"zh-CN": {
"greeting": "你好，{name}",
"count": "数量：{count, number}",
"date": "今天是：{today, date}",
"price": "价格：{amount, currency}"
},
"en-US": {
"greeting": "Hello, {name}",
"count": "Count: {count, number}",
"date": "Today is: {today, date}",
"price": "Price: {amount, currency}"
}
}
创建一个 ResourceManager 来加载和切换语言包：
立即学习“Java免费学习笔记（深入）”；
class ResourceManager {
constructor(messages) {
this.messages = messages;
this.locale = 'en-US';
}
setLocale(locale) {
if (this.messages[locale]) {
this.locale = locale;
} else {
console.warn(`Locale ${locale} not found`);
}
}
getMessage(key) {
return this.messages[this.locale]?.[key] || key;
}
}
2. 实现模板插值与类型格式化
解析占位符如 {name} 或带类型的 {value, number}，并调用对应格式化器。
支持基本类型格式化：
- string：直接替换
- number：使用 toLocaleString
- date：格式化为本地日期
- currency：带货币符号的数字
格式化处理器：
function formatValue(value, type, locale) {
switch (type) {
case 'number':
return value.toLocaleString(locale);
case 'currency':
return value.toLocaleString(locale, { style: 'currency', currency: 'USD' });
case 'date':
return new Date(value).toLocaleDateString(locale);
default:
return String(value);
}
}
解析模板字符串：
function interpolate(template, data, locale) {
return template.replace(/\{(\w+)(,\s*(\w+))?\}/g, (match, key, _, type) => {
const rawValue = data[key];
if (type) {
return formatValue(rawValue, type.trim(), locale);
}
return rawValue !== undefined ? rawValue : match;
});
}
3. 构建 i18n 核心类
整合资源管理和格式化逻辑：
class I18n {
constructor(messages, options = {}) {
this.resourceManager = new ResourceManager(messages);
this.locale = options.locale || 'en-US';
this.resourceManager.setLocale(this.locale);
}
setLocale(locale) {
this.locale = locale;
this.resourceManager.setLocale(locale);
}
t(key, data = {}) {
const template = this.resourceManager.getMessage(key);
return interpolate(template, data, this.locale);
}
}
使用方式：
const i18n = new I18n(messages, { locale: 'zh-CN' });
i18n.t('greeting', { name: '小明' });
// 输出：你好，小明
i18n.t('count', { count: 1000 });
// 输出：数量：1,000
i18n.setLocale('en-US');
i18n.t('greeting', { name: 'John' });
// 输出：Hello, John
4. 扩展功能建议
在基础版本上可逐步增强：
- 支持复数形式（通过 {count, plural, one {...} other {...}}）
- 支持 ICU 消息语法解析（可用 @formatjs/icu-message-parser）
- 按需加载语言包（异步 loadLocale）
- React/Vue 插件封装
- 编译时提取翻译键（类似 i18next-parser）
