JavaScript 中的模版字符串

  |   0 评论   |   0 浏览   |   Erioifpud

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


标题:JavaScript 中的模版字符串
作者:Erioifpud
地址:https://blog.doiduoyi.com/articles/1594956374414.html

评论

发表评论