模板字符串这是我参与8月更文挑战的第2天一般字符串的拼接都比较麻烦一般字符串拼接模板字符串拼接使用 `` 包裹所

“这是我参与8月更文挑战的第2天，活动详情查看：8月更文挑战”

一般字符串的拼接都比较麻烦

一般字符串拼接

 let preson = {
            name:"xiaoming",
            age:18
        };
        let elem = document.querySelector(".div1");
        elem.innerHTML = "he is " + preson.name + "we wish to know his " + preson.age ;

模板字符串拼接

使用 `` 包裹所拼接字符串

 let preson = {
            name:"xiaoming",
            age:18
        };
        let elem = document.querySelector(".div1");
        elem.innerHTML =  `he is ${preson.name} we wish to know his ${preson.age}`;

模板字符串注意事项

1 输出多行字符串一般字符串

     const info = '第一行\n第二行';
            console.log(info);

模板字符串中，所有空格、换行或者缩进都会被保留在输出之中

     const info = `第一行
            第二行`;
            console.log(info);

2 输出`和\等特殊字符

  const info = `\`\\`;
                console.log(info);

3 模板字符串的注入${}

           const username = 'alex';
            const person = {age:18,sex:'male'};
            const getSex = function (sex){
                return sex ==='male'?'男':'女';
            };
            const info = `${username},${person.age+2},${getSex(person.sex)}`;
            console.log(info);

只要最终可以得到一个值的就可以通过${}注入到模板字符串中

案例演示

掌握模板字符串的引入

<body>
    <div>学生信息表</div>
    <div id="list"></div>
    <script>
        const students = [
            {
                username:'liu',
                age:20,
                sex:'male'
            },
            {
                username:'liu',
                age:20,
                sex:'male'
            },
            {
                username:'liu',
                age:20,
                sex:'female'
            }
        ];
        let html = '';
        let list = document.getElementById('list');
        for (let i = 0 ; i<students.length;i++){
            html += `<li>${students[i].username},${students[i].age},${students[i].sex}</li>`;        }

        list.innerHTML = html;
    </script>
</body>