es6--模板字符串

1.什么是模板字符串

模板字符串由一般字符串的单引号('')或双引号("")变为反引号(``)

 <script>
        //一般字符串
        const str1 = 'female';
        const str2 = "male";

        // 模板字符串
        const str3 = `age`;
</script>

 

模板字符串与一般字符串的区别

• 模板字符串由一般字符串的单引号('')或双引号("")变为反引号(``)
• 和其他东西使用时使用模板字符串方便注入：

未使用模板字符串：

<script>
        const person = {
            username: 'Alex',
            age: 18,
            sex: 'male'
        };

        //一般写法：
        const info =
            '我的名字是：' +
            person.username +
            ', 性别：' +
            person.sex +
            ', 今年' +
            person.age +
            '岁了';
        console.log(info);

        // 和其他东西一起使用的时候，使用模板字符串，方便注入
        // 其他情况下使用模板字符串或一般字符串都行
</script>

 

使用模板字符串：

 <script>
        const person = {
            username: 'Alex',
            age: 18,
            sex: 'male'
        };

        //模版字符串写法：
        const info = `我的名字是：${person.username}, 性别：${person.sex}, 今年${person.age}岁了`;
        console.log(info);

        // 和其他东西一起使用的时候，使用模板字符串，方便注入
        // 其他情况下使用模板字符串或一般字符串都行
</script>

 

2.模版字符串的注意事项：

 a.输出多行字符串

<script>
        // 一般字符串
        // const info = '第1行\n第2行';
        // console.log(info);

        // 模板字符串
        //写法1 会删除前面多余的空格
        // const info = `第1行\n第2行`;

        //写法2 不会删除前面多余的空格
        //模板字符串中，所有的空格、换行或缩进都会被保留在输出之中
        const info = `第1行
         第2行`;

        console.log(info);
</script>

 

b.输出`和\等特殊字符

输出`:

<script>
     const info = `\``;
     console.log(info);
</script>

 

输出\:

<script>
        // 2.输出 ` 和 \ 等特殊字符
        const info = `\\`;
        console.log(info);
</script>

 

c.模板字符串的注入

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

<script>
        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);
</script>

 

3.模板字符串的应用

<style>
        body {
            padding: 50px 0 0 300px;
            font-size: 22px;
        }
        
        ul {
            padding: 0;
        }
        
        p {
            margin-bottom: 10px;
        }
</style>

    <p>学生信息表</p>
    <ul id="list">
        <li style="list-style: none;">信息加载中……</li>
    </ul>

 <script>
        // 数据
        const students = [{
            username: 'Alex',
            age: 18,
            sex: 'male'
        }, {
            username: 'ZhangSan',
            age: 28,
            sex: 'male'
        }, {
            username: 'LiSi',
            age: 20,
            sex: 'female'
        }];

        const list = document.getElementById('list');

        let html = ''; //清空操作

        for (let i = 0; i < students.length; i++) {
            html += `<li>我的名字是：${students[i].username},${students[i].sex},${students[i].age}</li>`;
        }

        // console.log(html);
        list.innerHTML = html; //渲染到页面
    </script>