模板字符串本身不支持国际化,需配合多语言键值对和动态填充实现;主流i18n库已内置安全插值机制,避免手动拼接与eval风险。

直接用模板字符串替换变量不等于国际化
模板字符串本身不提供多语言支持,它只是把变量插进去。比如 `欢迎,${name}!` 无论中文、英文还是日文环境,它都只按当前字符串执行。真正在国际化项目中用好它,关键在于“把语言资源和模板逻辑分开”,而不是硬编码文本。
配合 i18n 对象 + 模板字符串做动态填充
典型做法是:先定义多语言键值对,再用模板字符串处理其中含变量的部分:
- 准备语言包对象,按 key 组织翻译内容:
const i18n = {<br> zh: { welcome: '你好,{name}!今天是{day}。' },<br> en: { welcome: 'Hello, {name}! Today is {day}.' }<br>}; - 运行时根据 locale 选中对应文案,再用
replace或正则批量替换占位符:const msg = i18n.zh.welcome<br> .replace(/{name}/g, userName)<br> .replace(/{day}/g, new Date().toLocaleDateString('zh-CN')); - 更灵活的写法是封装一个轻量函数,支持任意数量变量:
function t(str, data) {<br> return str.replace(/\{(\w+)\}/g, (m, key) => data[key] ?? '');<br>}<br>t(i18n.en.welcome, { name: 'Alice', day: 'Friday' }); // "Hello, Alice! Today is Friday."
进阶:用模板字符串替代占位符语法(需谨慎)
如果语言包里直接存模板字符串(即带 ${} 的反引号内容),可以省去 replace 步骤,但要注意安全与可维护性:
- 示例:
const i18n = {<br> en: { greeting: `Hi, ${name}! You have ${count} new messages.` }<br>}; - 调用时需用
eval或Function构造器执行——这有严重安全风险,不推荐; - 更稳妥的方式是把模板字符串转为函数:
const greetingFn = (name, count) => `Hi, ${name}! You have ${count} new messages.`;<br>greetingFn('Bob', 3); - 实际项目中,主流 i18n 库(如 i18next、vue-i18n)都内置了类似
{{name}}或${name}的插值机制,底层已处理转义、复数、上下文等,无需手动拼接模板字符串。
注意事项:避免常见陷阱
在多语言场景下混用模板字符串容易出错:
- 不同语言语序不同(如中文“你有3条消息”,日语可能是“あなたはメッセージを3件持っています”),不能靠固定模板硬套;
- 变量类型未校验时,
${user.name}遇到undefined会输出字面量"undefined",建议统一用空值合并:${user?.name || ''}; - 用户输入内容直接插入模板字符串可能引发 XSS,尤其用于生成 HTML 时,必须先转义或使用安全渲染方式;
- 模板字符串无法自动识别复数、性别、时间格式等语言规则,这些必须交由 i18n 库的专用语法(如 ICU MessageFormat)处理。











