ES6 模板字符串怎么通过自定义标签函数实现国际化翻译-js教程-PHP中文网

ES6模板字符串通过标签函数实现国际化，核心是将静态文本数组strings与动态值数组values传入函数，由其按语言环境查词典并安全注入变量；strings[0]常作key，values对应占位符值，支持结构化key和i18n库集成。

es6 模板字符串怎么通过自定义标签函数实现国际化翻译

ES6 模板字符串通过自定义标签函数实现国际化（i18n），核心思路是：**把带占位符的多语言文本交给标签函数处理，由它根据当前语言环境查找对应翻译，并安全注入变量值**。这不是简单替换，而是将“原文结构 + 动态参数”解耦后，交由 i18n 系统统一调度。

标签函数接收什么数据

模板字符串被解析为两个关键部分传入标签函数：

strings：静态文本数组，按插值位置切分。例如 t`欢迎${name}，今天是${date}` → ["欢迎", "，今天是", ""]
values：所有插值表达式的运行结果，顺序与 strings 中的空隙一一对应。上例中若 name="小明"、date="周一"，则 values = ["小明", "周一"]

如何设计一个基础 i18n 标签函数

函数需结合语言包（如 JSON 对象）和 key 匹配逻辑。常见做法是：把模板首段静态文本（strings[0]）作为翻译 key，其余部分靠占位符对齐。

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

定义语言资源：const dict = { zh: { greeting: "欢迎${0}，今天是${1}" }, en: { greeting: "Welcome ${0}, today is ${1}" } }

标签函数示例：

function t(strings, ...values) {
  const key = strings[0].trim(); // 取首段作 key，如 "greeting"
  const lang = navigator.language || 'zh';
  let translated = dict[lang]?.[key] || dict['zh'][key] || strings.join('');
  // 替换 ${0} ${1}... 为 values 中对应值
  return translated.replace(/\$\{(\d+)\}/g, (m, i) => values[i] ?? '');
}

使用：const name = "小明"; const date = "周一"; console.log(t`greeting${name}${date}`); // 输出中文翻译

更实用的进阶方案

真实项目中建议采用结构化 key 或 message ID，避免依赖首段文本：

用注释或特殊语法标记 key，例如：t`/*login.success*/欢迎${user}！`，标签函数先提取注释内容作为 key
配合成熟的 i18n 库（如 i18next 或 formatjs），让标签函数只做桥梁：function t(strings, ...values) { return i18next.t(strings[0], { ...Object.fromEntries(values.map((v, i) => [`arg${i}`, v])) }); }
支持复数、性别等复杂规则时，不手动拼接，而是让 i18n 引擎处理占位符，例如：t`您有${count}条新消息` → 传入 { count: 1 } 后自动选“1条”或“2条”等不同译文