js模板字符串中执行函数方法

最新推荐文章于 2024-01-25 10:34:04 发布

今天也要暴富啊

最新推荐文章于 2024-01-25 10:34:04 发布

阅读量1.2k

点赞数

分类专栏：前端代码 js代码文章标签： javascript

本文链接：https://blog.csdn.net/qq_41590018/article/details/115960312

版权

前端代码同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

js代码

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    table {
      padding: 0;
      margin: 0;
    }

    table tr th,
    table tr td {
      border: 1px solid #C1DAD7;
      background: #fff;
      padding: 6px 6px 6px 12px;
      color: #4f6b72;
    }
  </style>
</head>

<body>
  <div id="app"></div>

  <script type="template/javascript" id="template">
    <table>
      <tr>
        <th>id</th>
        <th>名称</th>
        <th>年龄</th>
        <th>日期</th>
        <th>日期1</th>
      </tr>
      <tr>
        <td id="u{{id}}">{{id}}</td>
        <td title="{{name}}">{{name}}</td>
        <td title="{{age}}">{{age}}</td>
        <td title="{{today()}}">{{today()}}</td>
        <td title="{{today(-1)}}">{{today(-1)}}</td>
      </tr>
    </table>
  </script>
  <script>
    /*
     * day: Number，自定义前后天数
     */
    function today(day) {
      var tday = new Date() // 获取今天的日期
      tday.setDate(tday.getDate() + (day || 0))
      return tday.getFullYear() + '-' + (tday.getMonth() + 1) + '-' + tday.getDate()
    }

    function checkStr(str) {
      var pattern = new RegExp("[()]")
      if (pattern.test(str)) {
        return true
      }
      return false
    }

    // 在ES6中 是有字符串模板的 但是ES6之前呢？
    // 获取元素
    var template = document.getElementById("template");
    var tpl = template.innerText;
    // 结合对象： 
    var user = {
      id: "1234",
      name: "tony"
    };

    var str = tpl.replace(/{{(.*?)}}/g, function (match, $1) {
      if (checkStr($1)) {
        return eval($1)
      }
      return user[$1];
    });

    var app = document.getElementById("app");
    app.innerHTML = str
    // console.log(str)
    //   变为： 
    // `<table>
    //     <tr>
    //         <td id="u1234">1234</td>
    //         <td title="tony">tony</td>
    //     </tr>
    // </table>`
  </script>
</body>

</html>

今天也要暴富啊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js模板字符串中执行函数方法

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table { padding: 0;
复制链接

扫一扫