ES6 模板字符串用法详解

模板字符串使用 `` 反引号表示，需要使用变量时，通过 ${} 插入变量。

ES5 中拼接字符串

var uname = "小倩", age = 19, sex = "女", hobby = "古筝、笛、琵琶"
var str = '芳名：' +uname+ '，年芳' +age+ '，喜欢' +hobby
console.log(str) // 芳名：小倩，年芳19，喜欢古筝、笛、琵琶

使用模板字符串

var uname = "小倩", age = 19, sex = "女", hobby = "古筝、笛、琵琶"
var str = `芳名：${uanme}，年芳${age}，喜欢${hobby}`
console.log(str) // 芳名：小倩，年芳19，喜欢古筝、笛、琵琶

通过对比区别非常明显，使用模板字符串操作简单、清晰明了便于维护。

对象简写

可以将变量直接作为对象的属性使用，属性值为函数时可以直接将 ": function" 标识省略

let uname = "玉环", age = "青娥", gender = "女"
let obj = {
    uname,
    age,
    gender,
    getName() {
        return this.gender
    }
}
console.log(obj)

执行结果

{uname: "玉环", age: "青娥", gender: "女", getName: ƒ}