ES6模板字符串语法作为HTML模板实例页面

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>
                

JS代码：

/**
 * 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 \`${this}\`;`)(...vals);
};
// 业务处理代码
var eleTbody = document.querySelector('#tableMix tbody');
var strTemplate = eleTbody.querySelector('template').innerHTML;
// 获取数据
fetch('./ajax-article-list.php').then(res => {
    return res.json();    
}).then(json => {
    if (json.code === 0) {
        eleTbody.innerHTML = strTemplate.interpolate(json);
    }    
});