字符串扩展→模板字符串（实例）

水深无声 2022-01-17 04:47 366阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>字符串模板实例</title>
    </head>
    
    <body>
        <script>
            const xyz = {
                name: 'xyz',
                data: '2019/6/12',
                todos: [
                    { name: 'go to store', completed: false },
                    { name: 'watch TV', completed: true },
                    { name: 'running', completed: true }
                ]
            }
    
            //join的作用：指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符
            const template = `
                <ul>
                    ${xyz.todos.map(todo => `
                        <li> 
                            ${todo.name} ${todo.completed ? "√" : "×"}
                        </li>`).join('')}
                </ul>
    
            `
            document.body.innerHTML = template;
    
    
            /*
            复习一下
            */
            function renderTodos(todos) {
                return (
                    `
                <ul>
                    ${todos.map(todo => `
                        <li> 
                            ${todo.name} ${todo.completed ? "√" : "×"}
                        </li>`).join('')}
                </ul>
    
            `
                )
            }
    
            const template1 = `
                <div class="overstriking">
                    ${renderTodos(xyz.todos)}
                </div>
           `
            document.body.innerHTML = template1;
            console.log(template1)
    
        </script>
    </body>
    <style>
        .overstriking {
            color: red
        }
    </style>
    
    </html>