← 中文资源

简体中文版本

带缺失键报错的字符串模板插值

用普通对象渲染双花括号占位符,对缺失键和空值抛出明确错误,而不是静默输出 undefined。

阅读英文原文

功能说明

拼接用户可见文案时,字符串加法容易漏掉空格或把 undefined 写进结果。该函数用双花括号占位符替换对象字段,缺失键立即抛错。与完整模板引擎相比,它不执行表达式,因此不会引入代码注入风险,适合邮件、提示语和多语言文案。

关键代码

正则匹配 {{ key }} 并允许键两侧空白,只接受字母、数字、下划线和点。回调中先用 hasOwnProperty 检查自有属性,再拒绝 null 与 undefined,最后转成字符串。非对象参数在入口处被拒绝,避免访问原型链上的属性。

return template.replace(/\{\{\s*([\w.]+)\s*\}\}/g, (match, key) => {
  if (!Object.prototype.hasOwnProperty.call(values, key)) {
    throw new RangeError('missing value for "' + key + '"');
  }
  return String(values[key]);
});

使用注意

点号只作为普通键名的一部分,不解析嵌套路径。占位符之外的文本原样保留,不做 HTML 转义;用于 HTML 时必须由调用方转义。缺失键与空值都会抛错。模板中的单个花括号不会被视为占位符,大小写也需完全匹配。

验证方式

断言 interpolate(“Hello {{name}}”, { name: “Ada” }) 返回 Hello Ada。缺少 name 时抛 RangeError,值为 null 时抛 TypeError。模板中没有占位符时原样返回。带空白写法的 {{ name }} 应正常替换,值为 0 或 false 应保留并转成字符串。