模板字符串

最新推荐文章于 2025-12-11 21:57:31 发布

原创最新推荐文章于 2025-12-11 21:57:31 发布 · 697 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #es6

JS 专栏收录该内容

91 篇文章

订阅专栏

<!-- 
        模板字符串
            var str = 'hello'
            var str1 = "hello"
            var str2 = `hello`
        模板语法
          var a = 'hello'
           ${变量} 
          `hello`
        
        作用: 
           1. 字符串拼接
           2. 字符串换行时，不用连接符连接
        

     -->
</head>

<body>
    <script>
        // var s = 'world'
        // var str2 = `hello${s}`
        // console.log(str2);
        function strOne() {
            var a = 30
            var b = 20
            var c = a + b
            // var str = a + '+' + b + '=' + c // '10 + 20 = 30'
            var str = `${a}+${b}=${a+b}`
            console.log(str);
        }

        // var str = '<div>'+
        //              '<h2>标题</h2>'+
        //              '<p>模板字符串</p>'+
        //           '</div>'

        var title = '模板字符串标题'
        var str = `<div>
                     <h2>${title}</h2>
                     <p>模板字符串</p>
                   </div>
                   `
        // console.log(str);
        document.write(str)

应用*

<style>
        .y-table,tr,td,th{
            width: 1200px;
            margin: 100px auto;
            border: 1px solid #ced0d3;
            border-collapse: collapse;
        }
        .y-table tr{
            line-height: 40px;
            text-align: center;
        }
        .y-table tr:hover{
            background-color: #f7f8fa;
        }
    </style>
</head>
<body>
    <!-- <table class="y-table">
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>成绩</th>
            <th>性别</th>
        </tr>
        <tr>
            <td>1001</td>
            <td>jack</td>
            <td>98</td>
            <td>男</td>
        </tr>
        <tr>
            <td>1002</td>
            <td>rose</td>
            <td>95</td>
            <td>女</td>
        </tr>
        <tr>
            <td>1003</td>
            <td>小丽</td>
            <td>85</td>
            <td>女</td>
        </tr>
        
    </table> -->

    <script>
        var students = [
                {number:1001, name:'jack', score:98,gender:'男'},
                {number:1002, name:'rose', score:95,gender:'女'},
                {number:1003, name:'小丽', score:85,gender:'女'},
                {number:1004, name:'小明', score:85,gender:'女'},
         ]

         var trStr = '<table class="y-table">'
         for(var i = 0; i<students.length; i++){
             var student = students[i] //学生对象
             trStr = trStr + `<tr>
                                <td>${student.number}</td>
                                <td>${student.name}</td>
                                <td>${student.score}</td>
                                <td>${student.gender}</td>
                            </tr>`
         }

         trStr = trStr + `</table>`

        //  console.log(trStr);
        document.write(trStr)