手写一个模板引擎

自己实现stringFormat函数

stringFormat函数的使用示例：
var eleDiv = stringFormat('<div class="{0}">{1}</div>', 'ele', '我是一个div');
执行上面的代码后，eleDiv就变成了:
<div class="ele">我是一个div</div>
也就是说通过stringFormat可以对字符串进行格式化输出

自己实现的思路

• 因为我们无法预测到该函数会有多少个参数，最少一个（就是需要处理的字符串），因此在函数内需要通过arguments来获取变量
• 第一个参数string中包含有"{0}、{1}..."这种类型的字符，表示的是它们将分别使用 "第0个参数、第1个参数..."，因此在函数内我们需要获取到{}字符，并将其进行替换，所以需要使用正则表达式以及它的replace方法，以及正则的分组

代码如下：

function stringFormat(string) {
  var data = [].slice.call(arguments, 1);
  var regex = /{(\d+)}/g;
  string = string.replace(regex, function(){
    // 如果不知道输入的arguments参数是什么，可以打印出来
    // console.log(arguments)
    var index = arguments[1]; // arguments[1]获取到的是正则中分组的值
    return data[index];
  });
  return string;
}
stringFormat('hi, {0}, {1}', 1,2,3,4,5,6)

自己实现模板引擎第一版

变量使用<%...%>表示

var Temperate = function (string, data){
  var regex = /<%([^%]+)?%>/g;
  var match ;
  while(match = regex.exec(string)) {
    string = string.replace(match[0], data[match[1]]);
  }
  return string;
}
var data = {
  word: "hahaha",
  woooorld: '1234'
};

var str = Temperate('hello <%word%> hhah <%woooorld%>', data)
console.log(str);

实现了上面的代码后，可以查看这篇文章进行深入了解——只有20行Javascript代码！手把手教你写一个页面模板引擎