// 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'
}`