Handlebars.js如何避免不存在的占位符被替换为空字符串

helperMissing 仅在顶级变量不存在、或者调用了未注册的helper时触发。对于带.的嵌套路径，只要上层对象存在（你的场景中item对象是存在的），Handlebars会自行向下逐层查找属性，找不到时直接返回undefined渲染为空字符串，不会触发helperMissing，这是你之前的实现不生效的核心原因。

方案1：无需修改现有模板，重写Handlebars内置属性查找逻辑（推荐） #

直接重写Handlebars编译阶段的属性查找生成逻辑，全局生效，不需要修改任何现有模板代码：

// 保留原始查找方法
const originalLookupProp = Handlebars.JavaScriptCompiler.prototype.lookupProperty;
// 重写查找逻辑
Handlebars.JavaScriptCompiler.prototype.lookupProperty = function(parentNode, propertyName) {
  // 拼接当前完整路径
  const parentPath = parentNode.name || parentNode.parts?.join('.');
  const fullPath = parentPath ? `${parentPath}.${propertyName}` : propertyName;
  // 生成带判断的查找代码：属性不存在就返回原占位符
  return `(
    typeof ${parentNode} !== 'undefined' 
    && ${parentNode} !== null 
    && Object.prototype.hasOwnProperty.call(${parentNode}, ${JSON.stringify(propertyName)})
    ? ${parentNode}[${JSON.stringify(propertyName)}]
    : '{{${fullPath}}}'
  )`;
};

使用该方案后，你原有模板let str = "location = {{item.businessLocation}}";渲染后会直接输出你期望的location = {{item.businessLocation}}。

方案2：自定义取值helper（仅对指定变量生效，无全局侵入） #

如果不想修改Handlebars的内置逻辑，可以注册自定义取值helper，仅对需要保留占位符的变量使用：

1. 注册helper #

Handlebars.registerHelper('get', function(path, options) {
  const pathSegments = path.split('.');
  let currentValue = options.data.root;
  // 逐层遍历路径查找值
  for (const seg of pathSegments) {
    if (currentValue === undefined || currentValue === null || !Object.prototype.hasOwnProperty.call(currentValue, seg)) {
      // 找不到就返回原占位符
      return `{{${path}}}`;
    }
    currentValue = currentValue[seg];
  }
  return currentValue;
});

2. 调整模板写法 #

let str = "location = {{get 'item.businessLocation'}}";

该方案的优势是不会影响Handlebars的全局默认行为，适合只需要部分变量保留占位符的场景。

内容的提问来源于stack exchange，提问作者soumyojit