html常见模板语法,ES6模板字符串语法作为HTML模板 » 张鑫旭-鑫空间-鑫生活

HTML代码：

文章标题发布时间评论数

${data.map(function (obj, index) {

return `

${obj.title}

${obj.time}${obj.comment}`;

}).join('')}

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);

}

});