1.模版字符串-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_51614564/article/details/127830499

本文介绍了JavaScript中的模板字符串与一般字符串的区别，重点在于模板字符串的拼接方式及其优势。通过示例展示了如何使用模板字符串进行多行输出、特殊字符处理和变量注入。并提供了一个实际案例，利用模板字符串动态生成学生信息列表，增强了代码可读性和效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

平常单引号和双引号这些为一般字符串

“alex”,
'alex'

反引号: 模版字符串

 `alex`

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

案例如下：字符串进行拼接

const person={
username:'Alex',
age:18,
sex:'male'
}

#一般字符串进行拼接

const info="我的名字是："+person.username+',性别：'+person.sex+',年龄：'+person.age

#模版字符串进行拼接

const info=`我的名字是：${person.name},性别是：${person.sex},年龄是：${person.age}`

3.模版字符串的注意事项

1.输出多行字符串

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

3.模版字符串的注入

#输出多行字符串：模版字符串中所有的空格、换行或者锁紧都会保留在输出之中
//一般字符串
const info="第1行\n第2行"

//模版字符串
const info=`第1行\n第2行`
const info=`第1行
  第2行
`
#模版字符串的注入：

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

4. 模版字符串案例练习

<body>
  <p>学生信息表</p>
  <ul id="list">
      <li style="list-style: none;">信息加载中</li>
  </ul>
  <script>
      //数据
      const student=[
          {
           username:'Alex' ,
           age:18,
           sex:'male'  
          },
          {
           username:'zhang' ,
           age:28,
           sex:'female'  
          },
          {
           username:'li' ,
           age:23,
           sex:'male'  
          },
      ]
      const list=document.getElementById('list')
      let html='';
      for(let i=0;i<student.length;i++ ){
          //重新复制
          html +=`<li>我的名字是:${student[i]. username}</li>`
      }
      list.innerHTML=html;
  </script>
</body>