JavaScript 中怎么用 map 实现多语言文案的动态替换-js教程-PHP中文网

核心是用 map 批量遍历文案 key 并查多语言映射表替换，结构化存储 i18n 数据，配合 fallback 和插值封装成 t 函数实现轻量国际化。

javascript 中怎么用 map 实现多语言文案的动态替换

用 map 实现多语言文案动态替换，核心不是直接靠 map 翻译，而是用它批量处理文案数据、结合语言映射表完成替换。关键在于结构化存储多语言文案，并用 map 遍历+查表。

准备多语言映射表（JSON 结构）

把不同语言的文案按 key 组织成对象，比如：

const i18n = {
  zh: { welcome: '欢迎', logout: '退出登录', loading: '加载中...' },
  en: { welcome: 'Welcome', logout: 'Log out', loading: 'Loading...' },
  ja: { welcome: 'ようこそ', logout: 'ログアウト', loading: '読み込み中...' }
};

当前语言用一个变量控制，如 const lang = 'en';

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

用 map 遍历文案数组并动态替换

当你有一组带占位符或原始 key 的文案（比如后端返回的 key 列表），可以用 map 批量转成对应语言的文案：

const keys = ['welcome', 'loading', 'logout'];
const translated = keys.map(key => i18n[lang][key] || key); // 缺失时回退为 key
// → ['Welcome', 'Loading...', 'Log out']

确保 i18n[lang] 存在，否则加个空对象兜底：i18n[lang] ?? {}
推荐加 fallback：找不到 key 时返回原 key 或默认文案，避免空白
适合渲染菜单、按钮组、提示列表等「同结构多文案」场景

配合模板字符串做动态插值（进阶用法）

如果文案含变量（如 '欢迎，{name}！'），可先用 map 替换 key，再用函数插值：

const messages = [
  { key: 'welcome', data: { name: '小明' } },
  { key: 'logout', data: {} }
];

const result = messages.map(({ key, data }) => {
  const text = i18n[lang][key] || key;
  return Object.keys(data).reduce((str, k) => 
    str.replace(new RegExp(`{${k}}`, 'g'), data[k]), 
    text
  );
});
// → ['欢迎，小明！', '退出登录']

用 replace + 正则安全替换占位符，避免 eval 或模板字面量硬编码
这种结构也方便和 React/Vue 的列表渲染直接对接

实际项目中的轻量封装建议

不推荐每次手动写 map + 查表，可以简单封装一个工具函数：

const t = (key, data = {}) => {
  const text = i18n[lang]?.[key] ?? key;
  return Object.entries(data).reduce(
    (str, [k, v]) => str.replace(new RegExp(`{${k}}`, 'g'), v),
    text
  );
};

// 使用
['welcome', 'logout'].map(key => t(key, { name: 'Alice' }));