模板字符串

最新推荐文章于 2024-03-15 19:32:49 发布

小豪boy

最新推荐文章于 2024-03-15 19:32:49 发布

阅读量1.1k

点赞数

分类专栏： ES6学习笔记文章标签： html5 html css

本文链接：https://blog.csdn.net/qq_34771938/article/details/120411391

版权

ES6学习笔记专栏收录该内容

20 篇文章 0 订阅

订阅专栏

模板字符串是什么

1.认识模板字符串

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

模板字符串的注意事项

1.输出多行字符串

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

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

在特殊字符前面加上转义字符 “ \ ” 即可。

3.模板字符串的注入

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

模板字符串的应用

使用模板字符串修改ul列表中的数据。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>模板字符串的应用</title>
    <style>
      body {
        padding: 50px 0 0 300px;
        font-size: 22px;
      }

      ul {
        padding: 0;
      }

      p {
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <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>`;
      }

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

小豪boy

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
模板字符串

模板字符串是什么1.认识模板字符串2.模板字符串与一般字符串的区别模板字符串的注意事项1.输出多行字符串模板字符串中，所有的空格、换行或缩进都会被保留在输出之中。2.输出`和\等特殊字符3.模板字符串的注入...
复制链接

扫一扫