自己實現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代碼！手把手教你寫一個頁面模板引擎