模板字符串

模板字符串制作模板引擎的简单实现

ES6 模板字符串在 HTML 模板渲染中的应用

1.html 文件

<table id="tableMix" class="ui-table table">
  <thead>
    <tr>
      <th width="20"><input type="checkbox" /></th>
      <th>文章标题</th>
      <th width="22%">发布时间</th>
      <th width="15%" align="right">评论数</th>
    </tr>
  </thead>
  <tbody>
    <template>
      ${data.map(function (obj, index) { return `
      <tr>
        <td><input type="checkbox" value="${obj.id}" /></td>
        <td><div class="ell">${obj.title}</div></td>
        <td>${obj.time}</td>
        <td align="right">${obj.comment}</td>
      </tr>
      `; }).join('')}
    </template>
  </tbody>
</table>

2.普通字符串转模板字符串

// HTML 字符反转义 &lt; => <
function escape2Html(str) {
    let arrEntities = { 'lt': '<', 'gt': '>', 'nbsp': ' ', 'amp': '&', 'quot': '"' };
    return str.replace(/&(lt|gt|nbsp|amp|quot);/ig, function (all, t) {
        return arrEntities[t];
    });
}

/\*\*

- Convert a string to a template-string
- @param {Object} params 模板数据
- @return {String} 模板字符串语法解析后的字符串
\*/

  String.prototype.interpolate = function (params) {
    const names = Object.keys(params);
    const vals = Object.values(params);
    return new Function(...names, `return \`${escape2Html(this)}\`;`)(...vals);
  };

3.业务代码

// 业务处理代码
let eleTbody = document.querySelector("#tableMix tbody");
let strTemplate = eleTbody.querySelector("template").innerHTML;
// 获取数据
fetch("./ajax-article-list.php")
  .then((res) => {
    return res.json();
  })
  .then((json) => {
    eleTbody.innerHTML = strTemplate.interpolate(json.data);
  });

4.效果

5.其中 json 数据结构如下：

{
  "code": 0,
  "msg": "获取成功",
  "data": [
    {
      "id": "0001",
      "title": "如何让文字作为 CSS 背景图片显示？",
      "time": "2020 年 10 月 20 日",
      "comment": 7
    },
    {
      "id": "0002",
      "title": "SVG feTurbulence 滤镜深入介绍",
      "time": "2020 年 10 月 17 日",
      "comment": 3
    },
    {
      "id": "0003",
      "title": "HTML enterkeyhint 设置 iOS/Android 键盘 enter 键",
      "time": "2020 年 10 月 11 日",
      "comment": 3
    },
    {
      "id": "0004",
      "title": "快速学习 CSS Color Level 4 的色值新语法",
      "time": "2020 年 10 月 11 日",
      "comment": 2
    }
  ]
}