ES6语法四之模板字面量

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第27天，点击查看活动详情

大家好！我是前端爬楼工程师🚹，一个野生程序员。好奇新技术，仰慕牛大佬。如果喜欢我的文章，可以关注➕点赞，为我注入能量，与我一同成长吧～

---

ES6这个特性会很容易看成可复用、可渲染的文字片段，像大多数模板引擎提供的功能那样。真贴切的名称应该是插入字符串字面量。

使用 ` 作为界定符。

老的方式:

var name = "Kyle"
var greeting = "Hello " + name + "! " 
console.log(greeting)

新的方式：

var name = "Kyle"
var greeting = `Hello ${name}! `

一组字符外用..包裹，这会被解释为一个字符串字面量，单其中任何${..}形式的表达式都会被立即在线解析求值。这种形式的解析求值就是插入。

插入字符串字面量表达式结果就是普通字符串，..就像IIFE，自动展开求值。

它有一个优点，可以分散多行。

var text = `
first
second
third
`
console.log(text) 
// first
// second
// third

字符串字面量中的换行在字符串值中保留, \r\n都会标准换为\n。

插入表达式 ${..}可以出现任何合法表达式，包括函数调用、在线函数表达式调用，甚至其他插入字符串字面量

function upper(s){
    return s.toUpperCase()
}
var who = "reader"
var text = `A very ${upper("warm")} welcome 
to all of you ${upper(`${who}s`)}!
`

注意这里的嵌套，如果有多个层级就不可取了，代码一定要有可读性。

表达式作用域

function foo (str){
    var name = "foo" 
    console.log(str)
}
function bar(){
   var name = "bar"
   foo(`Hello from ${name}!`)
}
var name = "global"
bar() // Hello from bar!

字符串字面值展开的时候，在函数bar()内部，它可用的作用域找到bar()的变量name的值bar。全局name和foo()的name都不影响结果。换句话说，插入字符串字面量在它出现的词法作用域内，没有任何形式的动态作用域。

标签模板字面量

function foo(strings, ...values){
    console.log(strings, values)
}
var desc = "awesome"
foo`Everything is ${desc} ${desc}! `
// ["Everything is ","! "]
// ["awesome"]

可以看出Everything is !被${desc}分割形成数组，存到了strings变量里，${desc}被收集到values的数组里，其实这里用了...收集, 不代表${..}最后组合成了数组。

原始字符串

function showraw(strings, ...values){
    console.log(strings)
    console.log(strings.raw)
}
showraw`Hello\nWorld` //["Hello\nWorld"]
String.raw`Hello\nWorld`// Hello\nWorld
String.raw`Hello\nWorld`.length // 12

---