es6新特性之template string模板字符串

下面这样的写法是不是让你很头疼？

  <script>
	function getHtmlTr(data){
         var html="";//表头<tr><th>NO.</th><th>负责人</th><th>表数量</th><th>存储(G)</th><th>平均存储(G)</th></tr>
     	  $.each(data,function(i,obj){
		  	  var one="<tr><td>"+(i+1)+"</td><td>"+obj["owner"]
			  +"</td><td>"+obj["table_cnt"]+"</td><td>"+obj["total_delta_size"]
			  +"</td><td>"+obj["avg_delta_size"]+"</td></tr>";
			  html+=one;
		  });     
		  return html;
	}
	var ret=getHtmlTr([{"owner":"zhang","table_cnt":295,"total_delta_size":27391.7,"avg_delta_size":92.85},
	{"owner":"zhang","table_cnt":295,"total_delta_size":27391.7,"avg_delta_size":92.85}]);
	console.log(ret);
  </script>

执行结果：

哪里让你头疼呢？就是one这个变量定义的地方。这是以前的写法，来看看这次要说的es6的模板字符串（template string）的写法吧，只需要修改one变量定义的部分，因为只有这地方可以使用模板字符串啊：

var one=`<tr><td>${i+1}</td><td>${obj["owner"]}
			    </td><td>${obj["table_cnt"]}</td><td>${obj["total_delta_size"]}
			    </td><td>${obj["avg_delta_size"]}</td></tr>`;

执行结果：

es6模板字符串的写法是不是感觉清爽很多啊。模板字符串的写法需要注意三点：

1. 使用反引号"`"

2. 换行不需要再使用“+”来连接，随便换

3. 针对js变量可以使用"${变量}"的方式获取到值