JavaScript 中的模版字符串
众所周知,模版字符串是 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。