模板字符串使用反引号(`),并添加普通字符串引号所缺少的两个功能:表达式的插值和多行字符串。
js
name = ;
count = ;
msg = ;
total = ;
html = ;
在模板字符串出现之前,你需要写 "Hi " + name + ", " + count + ... — 冗长而容易出错。插值的可读性要好得多。
放在反引号前的函数接收字符串部分和插值的值,使其能够处理它们:
function highlight(strings, ...values) {
return strings.reduce((out, s, i) =>
out + s + (values[i] ? `<b>${values[i]}</b>` : ""), "");
}
highlight`Hello ${name}!`; // "Hello <b>Ann</b>!"
这为 styled-components 等库以及安全的 SQL/HTML 转义助手提供了支持。
模板字符串是当今构建字符串的标准方式 — 可读性强的插值、轻松处理多行文本,以及用于 DSL 的钩子(带标签的模板)。