重温ES6之模板字面量

---

模板字面量初体验

var name = 'zsy',
    age = 21,
    str;
str = "my name is\"" + name + "\".my age is " + age + "."; // 传统的拼接方式
// str = `my name is "${name}". my age is ${age}.`   // 模板字面量方式

console.log(str)

模板字面量嵌套模板字面量

let attr = 'border-radius'

function isChrome() {
    return true
}

attr = `${isChrome()? `-webkit-${attr}`:attr}`
console.log(attr)  // -webkit-border-radius

占位符

占位符内的计算结果会转换

• 在占位符内，表达式的计算结果会按照一定的规则转换成字符串
• 如果计算结果是数组，布尔值，对象或数组等，那么就调用它们内置的toString()方法
• 如果是null或undefined，那么就用String()函数实现类型转换

console.log(`${"abc"}`) // 'abc'
console.log(`${123}`) // 123
console.log(`${true}`) // true
console.log(`${null}`) // null
console.log(`${undefined}`) // undefined
console.log(`${{id:1}}`) // [object Object]
console.log(`${[1,2,3]}`) // 1,2,3

占位符内的变量必须先声明

// 报错：`i am studying at ${school}`
console.log(`i am studying at ${school}`)

占位符中的变量的作用域问题

• 下面的代码中有3个同名的scope变量
• 分别定义在全局作用域，outer函数作用域，inner函数作用域

var scope = 'global' // 全局作用域

function outer() {
    var scope = 'outer'

    function inner(str) {
        var scope = 'inner'
        console.log(str) // current outer
    }
    inner(`current ${scope}`)
}

outer()

• 对于下面的代码，如果模板字面量所处的作用域中没有该变量，那么就会沿着作用域链向上搜索，直到全局作用域为止

var scope = 'global' // 全局作用域

function outer() {
    // var scope = 'outer'

    function inner(str) {
        var scope = 'inner'
        console.log(str) // current global
    }
    inner(`current ${scope}`)
}

outer()

多行字符串

• 在ES6之前，如果代码需要换行，可以这样写：

let str1 = "第一行 \n" +
    "第二行 \n" +
    "第三行";
console.log(str1)

• 使用模板字面量后：

let str1 = `第一行
    第二行 
    第三行`;
console.log(str1)

• 注意：模板字面量会识别空白符，因此上面的代码，第二行和第三行都会有缩进

标签模板

为什么要出现标签模板

• 1.模板字面量有可能会遭受XSS（跨站脚本攻击）攻击，因为无法转义HTML中的特殊字符（如“<”，“>”等）
• 2.不能替代模板引擎（如Mustache等，因为无法在占位符中使用if，while等语句

标签模板初体验

• 下面的例子就是标签模板的调用方式

function func(literals, ...substitutions) {
    console.log(literals) // [ '<p>', '</p><p>', '</p>' ]
    console.log(substitutions) // [ 'zsy', 29 ]
}

let name = "zsy"
age = 21
func `<p>${name}</p><p>${age}</p>`

• 上述的literals数组包含了3个元素和一个特殊的raw属性
• 该raw属性是一个数组，它包含了literals数字中的3个元素所对应的原始信息
• 相当于为每个元素调用了一次String对象的raw()方法，
• 注意：String.raw()是一个内置的标签模板

演示String.raw()的功能

let html = `<p>\t</p>`
console.log(html) // <p>     </p>
html = String.raw `<p>\t</p>`
console.log(html) // <p>\t</p>