模板字符串

ES6 引入了一个新特性：模板字符串，模板字符串使用反引号 ` 而不是 " 或 ' 包裹。

字符串插值

模板字符串的最简形态就是普通字符串：

const str = `hello world`

使用模板字符串可以轻松地进行字符串插值：

const price = 150

// 普通字符串插值
const str1 = 'This commodity costs about ' + price + '$.'

// 模板字符串插值
const str2 = `This commodity costs about ${price}$.`

使用模板字符串插值既可以提高字符串整体的可读性，又可以减少在拼接多个字符串和变量时容易产生的错误。

模板替换中的代码可以是任何 JavaScript 表达式，因此允许函数调用、算术等。

const price = 150

// 算术
const str1 = `This commodity costs about ${price * 100}cent.`
// 函数
const str2 = `This commodity costs about ${(() => price * 100)()}cent.`

嵌套模板

如果你真的想要，你甚至可以在另一个模板字符串中嵌套一个模板字符串：

const price = 150
const unit = 'cent'
const str1 = `This commodity costs about ${unit === 'cent' ? `${price * 100}cent` : `${price}$`}`

多行字符串

在新行中插入的任何字符都是模板字符串中的一部分。

比如你想创建一段 HTML 代码：

const htmlStr = `
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
`

所有的回车，空格等字符都会保留在字符串中。

Notice

上面这样创建出来的字符串前后都会包含回车符 \n，因此可以调用字符串的 trim 方法去掉前后的回车。

标签模板

更高级的形式的模板字符串是带标签的模板字符串。标签使您可以用函数解析模板字符串。标签函数的第一个参数包含一个字符串值的数组。其余的参数与表达式相关。

const func = (a, b, c) => {
  console.log(a)
  console.log(b)
  console.log(c)
}
const commodity = 'wallet'
const price = 150
func`This ${commodity} costs about ${price}$.`

输出如下：

["This ", " costs about ", "$.", raw: Array(3)]
"wallet"
150

func 收到的第一个参数是模板字符串剔除插值之后分割成的字符串数组，数组中包含一个 raw 属性，里面包含这些字符串的原始字符串(转义之前)。

ES6 提供了 String.raw() 方法让我们获取原始字符串。

let s = String.raw`xy\n${1 + 1}z`
console.log(s) // "xy\\n2z"

参考文章

ES6 In Depth: Template stringsopen in new window