ES6系列—— 模板字符串(七)

相对来说,ES6的模板字符串这个模块比较简单,同时也是作为多年javascript开发者的福音。

ES5传统写法:

  1. var text = "这是一段文字!",
  2. html = "<div><p>" + text + "</p>";
  3. html += "<time>2017-09-04</time></div>";

无论是在字符串拼接还是在,各种DOM内容的输出上,在JS中生成DOM内容都较为复杂。


ES6模板字符串写法:

let val = “这是一个段落文字”,

  1. content = `
  2. <div>
  3. <p>${val}</p>
  4. <time>2017-09-04</time>
  5. </div>`

使用一组`` 符号包含所需的字符串,同时使用${**}传入所显示的变量。可以实现一个完成的DOM结构。

字符串模板扩展用法:

  1. let template = `
  2. <ul>
  3. <% for (var i=0;i<data.length;i++){ %>
  4. <li> <%= data.list[i] %> </li>
  5. <% } %>
  6. </ul>`

上面的代码在模板字符串中防止了一个常规模板。该模板使用<% … %>放置javascript代码,使用<%= … %>输出表达式。

评论: