ES6模板字符串通过标签函数实现国际化，核心是将静态文本数组strings与动态值数组values传入函数，由其按语言环境查词典并安全注入变量；strings[0]常作key，values对应占位符值，支持结构化key和i18n库集成。
ES6 模板字符串通过自定义标签函数实现国际化（i18n），核心思路是：**把带占位符的多语言文本交给标签函数处理，由它根据当前语言环境查找对应翻译，并安全注入变量值**。这不是简单替换，而是将“原文结构 + 动态参数”解耦后，交由 i18n 系统统一调度。
标签函数接收什么数据
模板字符串被解析为两个关键部分传入标签函数：
-
strings：静态文本数组，按插值位置切分。例如
t`欢迎${name}，今天是${date}`→["欢迎", "，今天是", ""] -
values：所有插值表达式的运行结果，顺序与
strings中的空隙一一对应。上例中若name="小明"、date="周一"，则values = ["小明", "周一"]
如何设计一个基础 i18n 标签函数
函数需结合语言包（如 JSON 对象）和 key 匹配逻辑。常见做法是：把模板首段静态文本（strings[0]）作为翻译 key，其余部分靠占位符对齐。
- 定义语言资源：
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条”等不同译文
注意事项
直接用模板字符串做 i18n 时，容易忽略几个关键点：
- 不要在
${}中写业务逻辑（如条件判断），应提前计算好值再传入，保证翻译系统只处理纯文本结构 - 静态文本必须可提取、可唯一标识，避免含动态内容（如
t`${status}成功`中status不稳定，无法当 key） - 保留
strings.raw可用于处理原始转义字符，比如翻译内容里含换行或制表符时需原样保留
