别再说es6 只新增了箭头函数了

初步了解

我们先来看一段css-in-js的代码

jsx 复制代码

import styled from 'styled-components';
const BlueText = styled.p`
  color: blue;
`;

<BlueText>My blue text</BlueText>

乍一看上去有点反直觉，明明样式是直接写在模板字符串里面的，后面是怎么渲染到组件上面去的呢？

其实这里用到了es6 新增的标签函数

js 复制代码

function tagFn (value,...rest){
    console.log(value,rest)
}
// 正常的函数调用 输出1 2
tagFn(12)

// 标签函数调用 输出如下
tagFn`1
${`996|`}
${23}
2`

// 箭头函数也试试看
const tagFn2 = (value...rest)=>{
     console.log(value,rest)
}
tagFn2`1
${`996|`}
${23}
2`

所以可以看到，不管是 function 定义的函数还是箭头函数定义的，都可以直接当作标签函数调用，那么也就是标签函数并不是指的某一个函数的定义形式，而是指的某一个函数的调用形式，一个函数既可以当作普通函数直接调用，也可以当成标签函数调用。

我们看以标签函数形式调用的时候，会将原始字符串以实参的方式传递进来，并将模板字符串中嵌套的${}内容以剩余参数的形式依次传进去。

ps: 这个转成剩余参数的行为只会转换当前第一层级的，嵌套的${}模板字符串的变量是不会被转义的，比如

其中 996 中有一个007 de 模板字符串的变量，但是剩余参数只是把 996 的原始串丢出来了

兼容情况

兼容情况还可以，不过既然有babel了那也可以放心大胆的去用

我们来看下babel的垫片

转换前

js 复制代码

function tagFn (value,...rest){
    console.log(value,rest)
}
// 正常的函数调用 输出1 2
tagFn(12)

// 标签函数调用 输出如下
tagFn`1
${`996| ${`007`}`}
${23}
2`

转换后

js 复制代码

"use strict";

var _templateObject;
function _taggedTemplateLiteral(strings, raw) {
  if (!raw) { raw = strings.slice(0); }
  /*
       Object.freeze 会将传入的对象冻结 并返回，冻结后的对象不可以增删改 
       严格模式下增删改会报错
       Object.freeze返回的是传入对象的引用，她不回创建新的对象
  */
  return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } }));
}
function tagFn(value) {
  console.log(value);
}
// 正常的函数调用 输出1 2
tagFn(12);

// 标签函数调用 输出如下
tagFn(_templateObject || (_templateObject = _taggedTemplateLiteral(["1\n", "\n", "\n2"])), "996| ".concat("007"), 23);

可以看到 babel 很巧妙的将模板字符串提前静态分析出来，然后直接调用目标函数，把解析出来的东西丢进去了

结语

模板字符串是一个很偏门的知识点，不管是在工作中，还是面试中出现的频率都比较低，大家可以不用在上面花费太多的精力，留个印象就好，万一某个想找茬的面试官问到这个，可以直接反手就是一巴掌。