标签模板的使用案例_模板支持程序代码标签-CSDN博客

本文链接：https://blog.csdn.net/qq_44603011/article/details/123367970

<body>

</body>
<script>
    let lessons = [
        { title: '媒体查询响应式布局', name: '李白' }, { title: 'FLEX 弹性盒模型布局', name: '小红' }, { title: 'GRID 栅格布局系统', name: '小花' }
    ];

    function template () {
        // 标签模板，要在返回的值中使用我们定义的标签模板函数links
        return `<ul>
      ${lessons.map((item) => links`
          <li>${item.title}作者是:${item.name}</li>
      `).join('')}
  </ul>`; //.join('')表示转化成字符串
    }
    function links (strings, ...abc) { //标签模板 传入两个参数，第一个参数是
        console.log(strings);// ['\n          <li>', '作者是:', '</li>\n      ', raw: Array(3)] 打印的是未解析模板字符串的
        console.log(...abc);// 媒体查询响应式布局 李白   打印的是解析完字符串的
        return strings.map((str, key) => {
            // console.log('66',str);
            // console.log(key);
            return str + (abc[key] ? abc[key].replace('布局', `<a href="http://www.baidu.com">布局</a>`) : '')
        })
    }
    document.body.innerHTML += template(); // 调用这个template()方法，将其加到body下面，并解析html标签
</script>

</html>

展示效果如下：