→ extended string template string (Example)

<!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>
→ extended string template string (Example)

Guess you like
