JavaScript(JS)语法 - 模板字符串详解

在上一节中我们学习了JS字符串的基础知识，本节我们将深入学习JS中的模板字符串。模板字符串是ES6引入的强大特性，它使用反引号（``）代替传统的引号，提供了更灵活的字符串处理能力。那什么是模板字符串？模板字符串是一种允许嵌入表达式的字符串字面量，能够让我们更优雅地处理字符串拼接和动态内容。

创建模板字符串的语法格式如下：

/*创建一个空模板字符串*/
const str = ``

在模板字符串中，我们既可以使用('')或("")包裹字符串：

const str=`"coding"at'Dotcpp!'`

在模板字符串中，允许多行字符串出现：

const str = `
'today'
'we'
'do'
'coding at Dotcpp'`

通过模板字符串，我们能够更加灵活地进行字符串拼接。比如对于每一个Dotcpp用户，他们都有自己的昵称、签名、成绩以及等级，如果我们想要通过这些属性输出一段自我介绍，模板字符串就显得十分高效和简洁：

// 创建Dotcpp用户
const dotcpp_user = {
 nickName: "dotcpp_user",
 signature:"学习使人进步",
 grade:100,
 degree:'P1'
};
/*方法1，转为字符串并通过+=拼接*/
const arr1=Object.values(dotcpp_user)//获取用户的信息
const arr2=['我是','，我的签名是','，我的成绩是','，我的等级是']
let self_str1=""
for(let i=0;i<4;++i)
{
  self_str1+=arr2[i]
  self_str1+=arr1[i]
}
self_str1+='。'
console.log(self_str1)
/*方法2，使用模板字符串进行拼接*/
let self_str2=`我是${dotcpp_user.nickName}，我的签名是${dotcpp_user.signature}，我的成绩是${dotcpp_user.grade}，我的等级是${dotcpp_user.degree}。`
console.log(self_str2)

模板字符串主要应用在动态生成HTML内容上。比如我们需要动态生成HTML内容：

// Dotcpp_user用户构造函数
function DotcppUser(nickName, signature, grade, degree) {
  this.nickName = nickName;
  this.signature = signature;
  this.grade = grade;
  this.degree = degree;
}
// 批量生成用户
const user1 = new DotcppUser("dotcpp_user01", "勤学苦练", 100, 'P1')
const user2 = new DotcppUser("dotcpp_user02", "勤学苦练", 100, 'P1')
const user3 = new DotcppUser("dotcpp_user03", "勤学苦练", 100, 'P1')
const users = [user1, user2, user3];
const str = users.map(user => `
    <h3>${user.nickName}</h3>
    <p>个性签名：${user.signature}</p>
    <p>成绩：${user.grade}</p>
    <span>等级：${user.degree}</span>
`).join('');
document.querySelector('body').innerHTML=str

总结：学会使用模板字符串，我们可以更高效快速地进行字符串拼接。模板字符串主要应用于动态生成HTML,读者需要熟练地掌握它。