javascript - 如何评估js中的字符串作为模板

Question

我想以集中控制的方式进行我的路由，为此我定义了一些 View ，我想评估它们，就好像它是一个格式的模板:

`this is a  ${variable} in the template`

这是我的代码:

const Views = Object.freeze({
    Home: {path:"/"},
    Kind:{path:"/${kind}", values:{kind:{notNull:true}}},
    SearchEntity:{path:"/${kind}/search/${name}", values:{kind:{notNull:true}, name:{}}},
    Entity:{path:"/${kind}/shop/${eid}", values:{kind:{notNull:true}, eid:{notNull:true}}},
    Issue:{path:"/${kind}/shop/${eid}/issue/${issueId}", values:{kind:{notNull:true}, eid:{notNull:true}, issueId:{notNull:true}}},
    NewShop:{path:"/${kind}/newShop/${name}", values:{kind:{notNull:true}, name:{}}},
})

eval.call({kind:"myKind", eid:"myeid", issueId:"myIssueId"}, Views.Issue.path)

这显然行不通，这就是我问这个问题的原因:)

eval 方法不理解上下文:

undefined:1
/${kind}/shop/${eid}/issue/${issueId}
^

SyntaxError: Invalid regular expression flags
    at Object.eval (<anonymous>)
    at Object.<anonymous> (C:\Users\Zied\work\weally\src\util.js:10:6)
    at Module._compile (internal/modules/cjs/loader.js:702:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
    at Module.load (internal/modules/cjs/loader.js:612:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
    at Function.Module._load (internal/modules/cjs/loader.js:543:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:744:10)
    at startup (internal/bootstrap/node.js:240:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:564:3)

自然地，我可以使用函数而不是模板来解决问题，但我想要一个更清晰、更易读的代码，并且我想在中间进行一些更多的控制(比如 notNull 验证检查等... ) 集中管理。所以我想将声明与执行分开

Answer 1

不需要 eval - 将 path 属性设为返回模板文字的函数，然后调用该函数:

const Views = Object.freeze({
  Issue: {
    path: ({kind, eid, issueId }) => `/${kind}/shop/${eid}/issue/${issueId}`,
    values: {
      kind: {
        notNull: true
      },
      eid: {
        notNull: true
      },
      issueId: {
        notNull: true
      }
    }
  },
});
console.log(Views.Issue.path({
  kind: "myKind",
  eid: "myeid",
  issueId: "myIssueId"
}));

如果你不能在path属性中放置一个函数，那么你可以使用正则表达式来匹配字符串中的${varName}并将其替换为输入对象中的相同属性:

const Views = Object.freeze({
  Issue: {
    path: '/${kind}/shop/${eid}/issue/${issueId}',
    values: {
      kind: {
        notNull: true
      },
      eid: {
        notNull: true
      },
      issueId: {
        notNull: true
      }
    }
  },
});

const replace = (template, obj) => template.replace(/\${(\w+)}/g, (_, varName) => obj[varName]);
console.log(replace(Views.Issue.path, {
  kind: "myKind",
  eid: "myeid",
  issueId: "myIssueId"
}));

如果你也想验证:

const Views = Object.freeze({
  Issue: {
    path: '/${kind}/shop/${eid}/issue/${issueId}',
    values: {
      kind: {
        notNull: true
      },
      eid: {
        notNull: true
      },
      issueId: {
        notNull: true
      }
    }
  },
});

const replace = (template, conditions, obj) => {
  const required = Object.entries(conditions)
    .filter(([, { notNull }]) => notNull)
    .map(([key]) => key);
  if (!required.every(prop => obj.hasOwnProperty(prop))) throw new Error('required missing');
  return template.replace(/\${(\w+)}/g, (_, varName) => obj[varName]);
};


console.log(replace(
  Views.Issue.path,
  Views.Issue.values,
  {
  kind: "myKind",
  eid: "myeid",
  issueId: "myIssueId"
}));


console.log(replace(
  Views.Issue.path,
  Views.Issue.values,
  {
  kind: "myKind",
  eid: "myeid",
}));