Doi技术团队

众所周知，模版字符串是 ES6（ES2015）中的特性之一，他就像是 C 中的 printf 那样，对模版字符串进行插值，但在写法上又有些不一样，JS 不需要使用特殊的占位符，如 %s、%d，直接传入变量就行了：

const temp = 27.35
const currentTemperature = `当前温度为：${temp} 度`
// 当前温度为：27.35 度

这种“简化”有优点也有不足，优点很明显，就是不需要记忆、查询不同类型对应的占位符，就算你传入的是一个对象，JS 内部也会将他通过 toString 转换成字符串进行显示。

不足之处（不一定是缺点）在于，模板字符串需要使用 ``` 这个特殊的符号，而且没有占位符，考虑一种场景，有一个全局使用的模版格式，按 C 的写法，你可以定义一个全局变量进行储存：

char TEMPLATE[] = "当前温度为：%f 度"

而在 JS 中，要实现这个需求，你只能将模版作为函数的返回值，如：

const TEMPLATE = (temp) => `当前温度为：${temp} 度`

你以为这样就结束了？实际上模板字符串还给我们带来了一种新的写法：

const temp = 27.35
const currentTemperature = toFixed`当前温度为：${temp} 度`
// 当前温度为：27.3 度

这里的 toFixed 是我自己写的函数，他的用处是保留一位小数，当函数碰上模版字符串时（使用这种写法），他就能读取到模版字符串中的信息：

function toFixed (strings, ...values) {
  return strings.reduce((str, next, index) => {
    return str + values[index - 1].toFixed(1)
  })
}

参数中的 strings 是一个列表，相当于使用 split，在 ${} 处进行分隔，此处的值为 ["当前温度为：", " 度", raw: Array(2)]，values 是插值组成的列表，这里的值为 [27.35]。

要注意的是，这种函数的返回值不一定得是字符串，也就是说，你还可以返回一个对象，那么有没有这样做的例子呢？答案是有的，可以参考 styled-components。