来源：ES6-标记模板字符串【渡一教育】

模板字符串前可以添加一个标记，它是一个函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const yajue = {
  name: 'yjsp',
  age: 24
}

// 参数1：模板字符串  其他参数：传给模板字符串的参数
const tag = (str, ...args)=> {
  // 先后输出[ 'name: ', ', age: ', '' ] yjsp 24和[ '', '' ] 2
  console.log(str, ...args)
  return tag
}

const str = tag`name: ${yajue.name}, age: ${yajue.age}``${1+1}`
console.log(str)  // -> [Function: tag]

用它可以实现不少骚操作，例如链式声明式地操作dom元素

1
2
3
4
5
6
7
8
9
10
11
12
13
// 记得把这几个方法写HTMLElement的原型上
dom.styles`
  color: ${color};
  background: ${background};
  weight: ${weight}px;
  height: ${height}px;
`.props`
  href: ${href};
  target: ${target};
  title: ${title};
`.content`
  omg${text}
`

styled-components这个库就是使用模板字符串的标记实现的