前言: ES5 中我们表示字符串的时候使用 '' 或者 ""
作用: 在 ES6 中，我们还有一个东西可以表示字符串，就是 ``（反引号）
let str = `hello world`console.log(typeof str) // string
和单引号还有双引号的区别:
- 反引号可以换行书写
// 这个单引号或者双引号不能换行，换行就会报错了
let str = 'hello world'
// 下面这个就报错了
let str2 = 'hello
world'
let str = `
hello
world
`
console.log(str) // 是可以使用的
- 反引号可以直接在字符串里拼接变量
// ES5 需要字符串拼接变量的时候
let num = 100
let str = 'hello' + num + 'world' + num
console.log(str) // hello100world100
// 直接写在字符串里面不好使
let str2 = 'hellonumworldnum'
console.log(str2) // hellonumworldnum
// 模版字符串拼接变量
let num = 100
let str = `hello${num}world${num}`
console.log(str) // hello100world100
在 里面的${} 就是用来书写变量的位置
实际应用:
更新数组初始值为列表元素
<body>
<ul>
</ul>
<script>
let arr = ["a", "b", "c"]
let newlist = arr.map(function(item) {
return `<li>
<b>${item}</b>
</li>`
})
console.log(newlist);
let oul = document.querySelector("ul")
oul.innerHTML = newlist.join("") // 不带jion的话, 每行之间会有,分隔
</script>
</body>
效果:
升级版: 利用index可以实现指定li中字体颜色的转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.active {
color: red;
}
</style>
</head>
<body>
<ul>
</ul>
<script>
let arr = ["a", "b", "c"]
let newlist = arr.map(function(item, index) { //添加index
return `<li class="${index === 0 ? 'active' : ''}">
<b>${item}</b>
</li>`
})
console.log(newlist);
let oul = document.querySelector("ul")
oul.innerHTML = newlist.join("") // 不带jion的话, 每行之间会有,分隔
</script>
</body>
</html>
效果:
