别再说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 很巧妙的 将模板字符串 提前静态分析出来,然后直接调用目标函数,把解析出来的东西丢进去了

结语

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

相关推荐
勤奋菲菲22 分钟前
Vue3+Three.js:requestAnimationFrame的详细介绍
开发语言·javascript·three.js·前端可视化
前端开发呀1 小时前
无所不能的uniapp拦截器【三】uni-app 拦截器核心流程解析
前端·javascript·微信小程序
云和数据.ChenGuang1 小时前
vue中构建脚手架
前端·javascript·vue.js
渣哥1 小时前
面试官最爱刁难:Spring 框架里到底用了多少经典设计模式?
javascript·后端·面试
朱昆鹏2 小时前
如何通过sessionKey 登录 Claude
前端·javascript·人工智能
wdfk_prog2 小时前
klist 迭代器初始化:klist_iter_init_node 与 klist_iter_init
java·前端·javascript
code_Bo2 小时前
基于vxe-table进行二次封装
前端·javascript·vue.js
闭着眼睛学算法2 小时前
【双机位A卷】华为OD笔试之【模拟】双机位A-新学校选址【Py/Java/C++/C/JS/Go六种语言】【欧弟算法】全网注释最详细分类最全的华子OD真题题解
java·c语言·javascript·c++·python·算法·华为od
晴殇i3 小时前
为什么现代 JavaScript 代码规范开始建议禁止使用 else ?
前端·javascript·前端框架
源力祁老师3 小时前
OWL与VUE3 的高级组件通信全解析
前端·javascript·vue.js