说明

ES6新特性，模板字符串用 反引号 包裹，如下：

``

好处：

• 可用 ${变量名} ，不用像传统字符串，用 + 拼接字符串
• 可直接换行

案例

传统写法

<script>
    // 做自我介绍
    function say(name,height,age,content){
        let s = "我叫"+name+"，身高是"+height+"，年龄是"+age
        console.log(s)
        let s2 = "我妈说：\""+content+"\""
        console.log(s2)
    }

    say("李雷",1.82,20,"不让我和傻子玩")
    say("韩梅梅",1.68,20,"不让我和李雷玩")

</script>

模板字符串

<script>
    // 做自我介绍
    function say(name,height,age,content){
        let s = `我叫${name}，身高是${height}，年龄是${age}`
        console.log(s)

        let s2 = `我妈说："${content}"`
        console.log(s2)
    }

    say("李雷",1.82,20,"不让我和傻子玩")
    say("韩梅梅",1.68,20,"不让我和李雷玩")

</script>

可直接换行

<script>
    // 做自我介绍
    function say(name,height,age,content){
        let s = `我叫${name}，身高是${height}，年龄是${age}`
        console.log(s)

        let s2 = `我
妈
说："${content}"`
        console.log(s2)
    }

    say("李雷",1.82,20,"不让我和傻子玩")
    say("韩梅梅",1.68,20,"不让我和李雷玩")

</script>

调用函数

在 字符串模板 中可以调用函数

// 调用函数
let cnt = `1 + 2 = ${add(1,2)}`
function add(a,b){
    return a + b
}

console.log(cnt)

三元表达式

let tag = true

const cnt = `tag ? '打开':'关闭'`

if语句

在 字符串模板 中，定义函数，在函数中实现 if 语句，最后调用该函数

const score = 72
let cnt2 = `
分数：${score}
评价：${
    (function(){
        if(score >= 90){
            return '优'
        }else if(score >= 80){
            return '良'
        }else if(score >= 70){
            return '中'
        }else if(score >= 60){
            return '差'
        }else{
            return '不及格'
        }
    })()
}
`

console.log("cnt2:",cnt2)

原文出处：/show_1IX3CAXL8mfF.html