ES6中实现简单的字符串模板渲染（拼接插入字符串）

字符串拼接方法

我们都知道，在ES5中字符串拼接方法比较繁琐。同一条字符串不能换行且要频繁用+拼接字符串。以拼接几个

• 为例

• ES5字符串拼接：

  		for(var i = 0 ; i < 100 ; i ++){
       
              html += '<li class="box">'
                          +'<span>hello</span>'
                          +'<strong>world</strong>'
                          +'<i>' + Math.random() +'</i>'
                      +'</li>'
          }
  

  可以看出字符串拼接频繁用’'和+，导致代码可读性较差

  ES6字符串拼接：

  		for(var i = 0 ; i < 100 ; i ++){
       
              html += `<li class="box">
                          <span>hello</span>
                          <strong>world</strong>
                          <i> ${
          Math.random() } </i>
                      </li>`
          }
  

  ES6取消了如此麻烦的字符串拼接方法，统一用反引号（``）包裹字符串，中间插入变量时统一用${要插入的变量}。极大的简化了代码，增强可读性。

  实现简单的字符串模板渲染

  介绍了ES6新增的字符串拼接方法，我们用这个方法实现一下简单的字符串模板渲染。在实际页面开发中，不可能拼接一次字符串就拼接一次字符串。而是会有一个模板，只需要按照模板写好字符串就可以直接实现字符串的拼接插入；
  1. 因为模板里面肯定包含js，所以我们对js代码进行特殊标记; <% js代码都放在这里 %>
  2. html结构在我们眼里就是字符串; html没有任何包裹;
  3. 输出的变量, 对变量进行一个特殊标记; <%= 变量都放在这里 %>
  代码如下：

  <script type="text/html" id=