Question

如何获得这样的效果？

name = 'Mark';
template = 'Your name is {{name}}';
console.log(template); // return "Your name is Mark";
name = 'John';
console.log(template); // return "Your name is John"

如何为字符串制作某种简单的模板系统？也许可以找到一些标签的函数（例如{{}}）并用当前变量替换里面的文本？或者在JS中构建一些方法？

Answer 1

尝试小胡子。 https://mustache.github.io/mustache.5.html

典型的模板如下所示：

Hello {{name}}
You have just won {{value}} dollars!

使用react也可以实现相同的（自定义模板），但是反应使用单{} curlies中的javascript代码。这允许你在ur（模板）组件周围拟合逻辑。它们可以跨视图重用。

Answer 2

如果你真的需要它是动态的，我创建了一个非常简化模板功能。我不建议将它用于生产现场，因为有车把，小胡子，灰尘等模板引擎，但这可能对你有用。你可以在这个小提琴上测试它：https://jsfiddle.net/vw6av0am/

function templateMe(template, obj) {
  var regex = /{{(.*?)}}/g;
  return template.replace(regex, function(match, capture) {
    return obj[capture] || "";
  });
}

var template = 'Your name is {{name}}';
var obj = {
  name: "Mark"
};

var output = templateMe(template, obj);
console.log(output);

带有模板的字符串，动态变量

2 个答案: