模板字符串

语法

// Basic literal string creation
;`In JavaScript '\n' is a line-feed.` // Multiline strings
`In JavaScript this is
 not legal.`

// String interpolation
var name = 'Bob',
  time = 'today'
;`Hello ${name}, how are you ${time}?`

// Construct an HTTP request prefix is used to interpret the replacements and construction
POST`http://foo.org/bar?a=${a}&b=${b}
     Content-Type: application/json
     X-Credentials: ${credentials}
     { "foo": ${foo},
       "bar": ${bar}}`(myOnReadyStateChangeHandler)

模板字符串使用反引号 ( ) 来代替普通字符串中的用双引号和单引号。模板字符串可以包含特定语法（${expression}）的占位符。占位符中的表达式和周围的文本会一起传递给一个默认函数，该函数负责将所有的部分连接起来，如果一个模板字符串由表达式开头，则该字符串被称为带标签的模板字符串，该表达式通常是一个函数，它会在模板字符串处理后被调用，在输出最终结果前，你都可以通过该函数来对模板字符串进行操作处理。在模版字符串内使用反引号（`）时，需要在它前面加转义符（\）。

原始字符串

在标签函数的第一个参数中，存在一个特殊的属性 raw ，我们可以通过它来访问模板字符串的原始字符串，而不经过特殊字符的替换。

function quux(strings, ...values) {
  strings[0] === 'foo\n'
  strings[1] === 'bar'
  strings.raw[0] === 'foo\\n'
  strings.raw[1] === 'bar'
  values[0] === 42
}
quux`foo\n${42}bar`

String.raw`foo\n${42}bar` === 'foo\\n42bar'

对比

// es5
var classes = 'header'
classes += isLargeScreen()
  ? ''
  : item.isCollapsed
  ? ' icon-expander'
  : ' icon-collapser'

// es2015
const classes = `header ${
  isLargeScreen() ? '' : item.isCollapsed ? 'icon-expander' : 'icon-collapser'
}`