“路漫漫其修远兮，吾将上下而求索。”—— 屈原《离骚》
什么是模板字符串？
模板字符串（Template Literals）是JavaScript中引入的一种新的字符串表示方式，它使用反引号（`）而不是单引号（'）或双引号（"）来定义字符串。
模板字符串特性及代码举例：
- 多行字符串：模板字符串可以直接包含换行符，而不需要使用转义字符（\n）或字符串连接符（+）来连接多行字符串。
let message = `Hello,
world!`;
console.log(message);
//Hello,
//world!
- 嵌入表达式：模板字符串中可以使用${}语法来嵌入表达式。这些表达式会被求值，并将其结果转换为字符串后嵌入到模板字符串中。
let name = "Alice";
let age = 30;
let greeting = `Hello, ${name}! You are ${age} years old.`;
console.log(greeting);// Hello, Alice! You are 30 years old.
- 标签模板：模板字符串前面可以添加一个“标签”函数，该函数可以对模板字符串的内容进行处理，并返回一个结果。这提供了一种高级用法，允许开发者完全控制模板字符串的处理方式。
let name = "Alice";
let age = 30;
function tag (strings, ...values) {
console.log(strings); // 模板字符串中的静态部分
console.log(values); // 插值表达式的结果
return `Tagged template result`;
}
let result = tag`My name is ${name} and I am ${age} years old.`;
console.log(result);
- String.raw方法：模板字符串还可以通过String.raw方法来获取“原始”字符串，即不对反斜杠（\）进行转义处理。
let path = `C:\Users\name`;
let rawPath = String.raw`C:\Users\name`;
console.log(path); // 输出: C:\Usersame
console.log(rawPath);// 输出: C:\Users\name
详细举例用法：
${ }里面可以放表达式、+ 、-、*、/、普通变量、三目运算符、调用函数等!!!
<body>
<ul>
</ul>
<style>
.active {
color: red;
}
</style>
<script>
let arr = ['kitty', 'Alice', 'Bob'];
let newList = arr.map((item, index) => {
return `<li class="${index == 0 ? 'active' : ''}">
<b>${item}</b>
</li>`;
})
console.log(newList);
let oul = document.querySelector("ul");
oul.innerHTML = newList.join("")
</script>
</body>
<body>
<ul>
</ul>
<style>
.active {
color: red;
}
</style>
<script>
let name = 'Kitty';
let oli = `<li><b> ${name}</b></li>`
function test () {
return "自定义添加的内容"
}
let arr = ['kitty', 'Alice', 'Bob'];
let newList = arr.map((item, index) => {
return `<li class="${index == 0 ? 'active' : ''}">
<b>${item}</b>
${test()}
</li>`;
})
console.log(newList);
let oul = document.querySelector("ul");
oul.innerHTML = newList.join("")
</script>
</body>
