前言: 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) { //添加indexreturn `<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>
效果:
