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

结语

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

相关推荐
一枚前端小能手9 分钟前
🔐 单点登录还在手动跳转?这几个SSO实现技巧让你的用户体验飞起来
前端·javascript
tianchang18 分钟前
深入理解 JavaScript 异步机制:从语言语义到事件循环的全景图
前端·javascript
JNU freshman1 小时前
vue 技巧与易错
前端·javascript·vue.js
Asort1 小时前
JavaScript设计模式(十六)——迭代器模式:优雅遍历数据的艺术
前端·javascript·设计模式
我是日安1 小时前
从零到一打造 Vue3 响应式系统 Day 28 - shallowRef、shallowReactive
前端·javascript·vue.js
开源之眼1 小时前
深入理解 JavaScript 报错:TypeError: undefined is not a function
前端·javascript
却尘1 小时前
当你敲下 `pnpm run dev`,这台机器到底在背后干了什么?
前端·javascript·面试
歪歪1001 小时前
React Native开发有哪些优势和劣势?
服务器·前端·javascript·react native·react.js·前端框架
一个很帅的帅哥2 小时前
伪类选择器和伪元素选择器
javascript
Glommer2 小时前
某红书 Js 逆向思路
javascript·逆向