Handlebars.js中如何执行助手返回的路径表达式

这个问题我之前也碰到过！Handlebars 默认不会自动解析助手返回的字符串里的模板表达式——助手返回的内容默认会被当作纯文本直接输出，哪怕里面包含{{}}语法。要实现你想要的“让助手返回的路径表达式被解析执行”的效果，有两种比较靠谱的方案：

方案一：在助手内部动态编译并执行表达式 #

你可以在助手函数里，把生成的路径表达式字符串用Handlebars.compile()编译成可执行的模板函数，再传入当前上下文和选项执行，直接返回解析后的结果。

比如你的testHelper可以这么写：

Handlebars.registerHelper('testHelper', function(arg1, arg2, options) {
  // 这里根据你的逻辑生成路径表达式，比如 "{{@../../key}}.{{@../key}}.{{@key}}"
  const pathExpression = `{{@../../key}}.{{@../key}}.{{@key}}`;
  
  // 编译表达式为模板函数
  const compiledTemplate = Handlebars.compile(pathExpression);
  
  // 传入当前上下文（this）和选项，执行模板得到解析后的结果
  return compiledTemplate(this, options);
});

这样一来，助手返回的就不是原始的字符串表达式，而是已经解析好的a.b.c，模板渲染时就会直接输出这个值了。

方案二：直接通过上下文层级计算结果（更高效） #

动态编译模板虽然简单，但多少会有性能开销。如果你的路径逻辑是固定的（比如就是从当前上下文向上两层、向上一层和当前层取key拼接），可以直接通过Handlebars提供的上下文对象来获取对应层级的key值，手动拼接成目标字符串。

Handlebars的助手函数第三个参数options里，options.data包含了上下文的层级信息：parent指向父级上下文，root指向根上下文。你可以这样写助手：

Handlebars.registerHelper('testHelper', function(arg1, arg2, options) {
  // 获取向上两层的上下文（对应@../../）
  const topLevelContext = options.data.parent.parent.context;
  const key1 = topLevelContext.key; // 对应示例中的"a"
  
  // 获取向上一层的上下文（对应@../）
  const middleLevelContext = options.data.parent.context;
  const key2 = middleLevelContext.key; // 对应示例中的"b"
  
  // 当前上下文的key（对应@key）
  const key3 = this.key; // 对应示例中的"c"
  
  // 拼接成目标路径字符串
  return `${key1}.${key2}.${key3}`;
});

这种方法跳过了动态编译的步骤，直接从上下文里取值，性能更好，也更直观。

为什么原来的方法不行？ #

你之前的写法里，助手返回的是包含{{}}的字符串，Handlebars会把它当作普通文本处理——哪怕你用SafeString包装，也只是避免HTML转义，不会触发模板解析。只有让助手自己完成解析（或者直接计算出结果），才能得到你想要的输出。

内容的提问来源于stack exchange，提问作者Chethan Jagannatha Kulkarni