如何存储模板字面量，后续传入动态参数完成延迟求值？

你当前的问题在于，titleByStatus对象初始化时就把当时的name值插值进字符串了，后续name变化时，这些字符串不会自动更新。解决思路很简单——把模板从预插值的字符串改成能接收参数的函数，每次调用时传入最新的name即可。

优化后的实现代码 #

enum Status {
    CANCELLED = 'cancelled',
    FAILED = 'failed',
    PASSED = 'passed',
}

// 把模板定义为接收name参数的函数，返回动态生成的字符串
const titleByStatus = {
    [Status.CANCELLED]: (name: string) => `${name} cancelled`,
    [Status.PASSED]: (name: string) => `${name} matches`,
    [Status.FAILED]: (name: string) => `${name} does not match`,
};

const output = (name: string) => {
    if (result) {
        return result;
    }
    // 调用对应状态的模板函数，传入最新的name
    return titleByStatus[status]?.(name) ?? 'Unknown status';
};

额外优化点 #

• 加入可选链?.和空值合并??，处理状态不在枚举范围内的异常情况，避免报错。
• 如果name是全局变量或者可以从闭包获取，也可以不用在output里传参，但显式传参更清晰，符合函数式编程的单一职责原则。
• 要是模板逻辑更复杂，还可以把模板字符串抽成单独的常量，再用函数组合，比如：

  const TEMPLATES = {
      CANCELLED: '{name} cancelled',
      PASSED: '{name} matches',
      FAILED: '{name} does not match',
  };
  
  const titleByStatus = {
      [Status.CANCELLED]: (name: string) => TEMPLATES.CANCELLED.replace('{name}', name),
      // ...其他状态
  };
  

  这种方式更适合需要复用模板或者模板内容较长的场景。

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