你知道 ES6 的模板标记吗？

什么是 ES6 标记函数？其实简单来说就是模板字符串的函数

首先我们看一下 ES6 的模板字符串 这个大家最熟悉不过了

const zs = '张三'
const sign = `${zs}你能不能给我点赞`

但其实模板字符串是可以放标记的，简单来说就是函数

const zs = '张三'
const boy = '臭小子'
const sign = Tab`${zs}你能不能给我点赞，${boy}快点收藏关注`
// 函数里面返回什么，sign 的结果就是什么
function Tab(val,val2) {
    return val
}
这个函数第一个参数为：
[ '', '你能不能给我点赞，', '快点收藏关注' ]
第二个参数为：
张三

以此类推...
我们也可以用扩展运算符统一接收了

那么这个东西有什么用呢？

第一就是处理字符，不过这个需求应该很少需要

第二就是可以进行链式调用

// 比如我们现在要动态生成一个 dom 元素，按以前我们以前可能这样写
a.style.color =
a.style.herf =
a.style.title = 
a.style.height = 
......

// 我们学了标记模板函数之后可以
a.style`
    color: ,
    height ,
`props`
    href: ,
`content`
    跳转到....
`

// 之所以可以这样链式调用，是因为我们返回了 dom 对象


function generateString() {
    ......
}
HTMLElement.prototype.styles = function () {
    const style = generateString(arguments)
    let curStyle = this.getAttribute('style')
    if(curStyle) {
        curStyle += styles
    }else {
        curStyle = styles
    }
    this.style = curStyle
    // 返回 dom 对象，方便链式编程
    return this
}
HTMLElement.prototype.props = function() {
    ......
}
HTMLElement.prototype.content = function() {
    ......
}

可能对于大家来说用处可能不大，但其实也增加了大家知识的拓展性

如果你觉得这份文章很有用，别忘了把它收藏起来，并关注我以获得更多类似的内容。