关于模板字面量,我有点好奇它的内部结构

news2024/11/23 11:04:06

前言

最近翻看源码的时候,发现一些有趣的 JS 的知识点,基于日常的开发经验,我做了一些联想和对比。整个过程充满了乐趣。

于是我想,是不是可以延续这种创意带来的学习的乐趣。

带的富含创造力夜晚的 buff,确实让我拥有了不错的灵感。这些灵感像繁星一样闪耀着我的夜里,留下一行文字:

关于模版字面量,好奇它的内部结构吗?

文章速读

阅读文章,可以有以下收获:

模板字面量的内部结构

编程欢乐小剧场

这天某正在欢乐的敲代码,过程流畅丝滑,不带一丝一毫的停顿。

某再敲下一行代码之后,停了下来,并转身问了一个问题。

某:你认真思考过一个问题吗?

一:我俩为什么相识?不用思考,肯定是考验我的,俗话说,天将降大任于…

某:停,停,嘴皮子太溜了。我是说,你看这行代码。

一:还能写的这么复杂呢?

某:都说模板字面量是一种可执行结构。它的内部结构是什么样的?

一:这个我还真没想过,不过我们可以打印一下。

某:键盘递上

模板字面量的内部结构怎么打印?

我受 MDN 官网的启发,反复试验了几次,我感觉我是弄明白了。跟大家演示一下整个过程。

展开参数

第一种,直截了当的展开参数:

let num1 = 1;
let num2 = 2;

function tag(...strings) {console.log(strings);
}

tag`string text line ${num1} and line ${num2}`; 

打印结果

// > [ [ 'string text line ', ' and line ', '' ], 1, 2 ] 

借助关于 String.raw() 的理解,大致明白了这个结构。

这个结构主要包括两个部分:原始字符串和其他字符串。

  • 原始字符串会被放在第一个参数中,这个参数类型是数组,而这个参数存在一个特殊的属性 raw ,可以通过它来直接访问模板字符串的原始字符串,而不经过特殊字符的替换。
  • 其他字符串参数在原始字符串之后。

需要注意的一点是原始字符串是包含转义字符,而其他字符串包含占位符等,比如代码中的 ${num} 。

转义字符

当模版字符串里面包含像 \n 这类的转义字符,\n 不会被特殊处理,它会被放入原始字符串之中。

tag`string text line ${num1} \n line ${num2}`; 

打印结果

// > [ [ 'string text line ', ' \n line ', '' ], 1, 2 ] 

raw 属性

raw 属性可以获取一个模板字符串的原始字符串。

let num1 = 1;
let num2 = 2;

function tag(strings) {console.log(strings.raw);
}

tag`string text line ${num1} and line ${num2}`; 

打印结果

// > [ 'string text line ', ' and line ', '' ] 

听说模板字面量还支持复杂的写法?

日常开发

在日常开发中,经常在如下的场景中使用模版字面量:

// 三元表达式
type === 'admin' ? `${name}` : `${userName}`;

// 带参数的跳转路径
history.push(`/detail?id=${id}`)

// 简单的求和表达式
var a = 5;
var b = 10;
console.log(`sum: ${a + b}`); 

复杂写法

插入循环

下面的代码通过数组循环获取属性 num 的值拼接成字符串,连接左右的字符串’[‘和’]',最终展示为数组的形式。

let example = [{ num: 1 }, { num: 2 }, { num: 3 }];
let str = `数组的另一种展示方式:[${example.map(({ num }) => num).join(', ')}]`;

console.log(str); 

打印结果

// > 数组的另一种展示方式:[1, 2, 3] 

我从 axios 源码中看到了上面例子中的写法,恍然大悟,模版字面量原来还可以这样玩。

补充模板字面量的知识点

标签函数

前面探索模板字面量的内部结构中的举例,其实还可以将 tag 函数的入参换成下面这种:

let num1 = 1;
let num2 = 2;

function tag(strings, numExp1, numExp2) {const str0 = strings[0];const str1 = strings[1];const str2 = strings[2];return `${str0}${numExp1}${str1}${numExp2}${str2}`;
}

let output = tag`string text line ${num1} and line ${num2}.`;
console.log(output); 

打印结果

// > string text line 1 and line 2. 

标签函数的定义

有了前面的基础,标签函数也好理解了:

接受了一个模板字符串作为实参的函数。

标签函数的参数

再回到 tag 函数参数,这三个参数也比较好理解,前面的过模板字面量的内部结构中有过介绍。这里再详细介绍一下:

strings:字符串数组,里面包含模板字符串中全部的原始字符串。

num1:第一个占位符的值。

num2:第二个占位符的值。

标签函数的参数转换

熟悉模板字面量的内部结构的另一个帮助,我们可以继续tag 函数参数的转换实验,上面的代码等同于下面的代码:

let num = 1;
let num2 = 2;

function tag(strings, ...rest) {const str0 = strings[0];const str1 = strings[1];const str2 = strings[2];const numExp1 = rest[0];const numExp2 = rest[1];return `${str0}${numExp1}${str1}${numExp2}${str2}`;
}

let output = tag`string text line ${num} and line ${num2}.`;
console.log(output); 

小结

1.模版字面量的内部结构包括原始字符串和其他字符串两个部分。
2.原始字符串中包含转义字符,其他字符串主要包括占位符等。
3.模版字面量自带的 raw 属性可以获取一个模板字符串的原始字符串。
4.模版字面量的复杂写法,某些情况下比较灵活的得到想要的结果。
5.标签参数是指接受一个模板字符串作为实参的函数。

总结

关于模版字面量的内部结构,摸索的过程还是很有趣的。虽然从前面的篇幅中看着很简单,但是其实我反复实验了多次,并且借助 String.raw() 的知识点,才很好的理解了输出中的结果。

虽然事情没有看上去的简单,但是结果还是很令人欣慰的。

今天还有一个不错的收获,原来模版字面量里还可以插入循环,一扇新的窗户打开了。

彩蛋

有时候觉得实现方式挺有趣的,但是又说不上哪里有趣?

花时间花心思设计出一个不错的功能,实现思路有趣,代码逻辑清晰,功能本身也丰富多彩。但是等到跟大家安利的时候,却不知道从何说起,甚至连怎么用都表达的不够清晰。

不善表达?

1.理清条理。讲之前,不妨先把功能的是什么、怎么用、核心实现列出来。提前做好准备,等到真正做分享的时候,能清楚明白的表达自己是想法。

2.言必有中。有时候分享的内容不在于文字的数量,而在于能说到点子上。不然,听众听了半小时,还云里雾里,不知道分享的功能到底是什么。

3.扩宽技术词汇量。这是很关键的一点,有时候讲解的内容,远没有功能本身精彩。,比起很直白的说这么写功能就好使,介绍用了什么设计模式、包含哪些技术概念,可以更有吸引力。

怯场?

心中总有腹稿万千,等到台上看着大家期待的眼神,准备好的开场白,瞬间跑了一半。磕磕巴巴的讲完,有点懊恼没有表达好。

这种情况,我给的两个建议是自信+准备充足。

首先,自信不单单指当时的状态,还有对分享的内容。

然后,准备充足是指,演讲稿要简要而全面。我一般会准备PPT,内容不会特别多,但是全。这样腹稿忘了的时候,照着PPT能继续下去。

最后,分享前,尽量自己先做几次完整的分享练习,看能否连贯的将分享内容讲出来。

最后

整理了一套《前端大厂面试宝典》,包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法,一共201道面试题,并对每个问题作出了回答和解析。

有需要的小伙伴,可以点击文末卡片领取这份文档,无偿分享

部分文档展示:



文章篇幅有限,后面的内容就不一一展示了

有需要的小伙伴,可以点下方卡片免费领取

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/197401.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

一、系统编程常用api

一、文件io文件io是linux系统提供的接口,针对文件和磁盘进行操作,不带缓存机制标准io是c语言函数库里的标准io模型,在stdio.h中定义,通过缓冲区操作文件,带有缓存机制标准 IO 和文件 IO 的区别如下图所示:文…

SSD(固态) VS HDD(机械),购买指南

大多数人买电脑的时候纠结买固态硬盘(SSD)还是机械硬盘(HDD)。哪个是最佳选择呢,是固态硬盘还是机械硬盘呢?这个问题没有直接的答案,每个购买者有不同的需求, 需要根据需求做选择。这些需求像是性能、和预算…

DS18B20测量温度液晶1602显示

DS18B20温度传感器简介DS18B20是一种数字温度传感器。它输出的是数字信号,同时具有体积小,硬件资源耗费少,抗干扰能力强,精度高等特点。DS18B20温度传感器特点1、单线接口:DS18B20仅需一条线可实现与微处理器双向通信。…

泰山服务器板载 HNS3 网卡绑核无法充分利用 CPU 的解决思路

文章目录前言解决方案排查过程应用程序运行环境与方式检查是否存在 irqbalance 进程检查中断号对应的 CPU 亲和尝试其他绑核方式尝试调整队列数量:核心数量为 2:1前言 前段时间在泰山服务器上进行性能测试,预期是应用进程能够占满机器大部分 CPU。但实际上&#xf…

书城第二阶段——用户注册和登陆

目录0.0 JavaEE 项目的三层架构0.1 项目阶段二:用户注册和登陆的实现。1、先创建书城需要的数据库和表。2、编写数据库表对应的JavaBean对象。3、编写工具类 JdbcUtils3.1、导入需要的 jar 包(数据库和连接池需要):3.2、在 src 源…

钉钉一键登录第三方网站

钉钉一键登录第三方网站序钉钉开发者后台H5微应用应用代码开发登录页面login.html登录实现LoginController.javapom.xml增加一键登录效果展示序 企业内部系统已经做过了钉钉扫码登录,现在需要添加钉钉一键登录第三方网站功能,这里主要记录一键登录整个实…

物联网终端设备的工作原理和功能讲解

物联网终端设备是实现数据采集和数据传输的设备,它连接了传感网络层和传输网络层,起到了数据采集、数据处理、数据加密和传输的功能。 物联网终端设备由传感器、外部传感接口、CPU和外部通讯组成,工作原理是通过外部传感接口与传感设备连接&a…

和平精英军需精打细算天花板,330拿下一整套军需

和平精英军需精打细算天花板,330拿下一整套军需! #和平精英 #这游戏不花钱 #游戏凡星计划 军需精打细算天花板,一个月时间花 110 块获得 436 个军需币。拿个新军需的副套问题不大。要知道和平小店的暖弄大礼包, 100 左右&#…

一次在 classpath 使用通配符导致的偶发问题排查与建议

说起 Classpath,使用 Java 的同学应该都不会陌生。不过,目前的项目基本都会使用 Maven 等构建工具管理,开发过程中也会使用高度智能化的 IDE,在日常使用中直接涉及 Classpath 操作可能不多。前段时间遇到一个跟 Classpath 相关的偶…

【My Electronic Notes系列——触发器】

目录 序言: 🏆🏆人生在世,成功并非易事,他需要破茧而出的决心,他需要永不放弃的信念,他需要水滴石穿的坚持,他需要自强不息的勇气,他需要无畏无惧的凛然。要想成功&…

【栈】单调栈详情介绍及其运用

单调栈单调栈的概述(Overview)何时使用单调栈模拟单调递增栈单调栈的运用(算法练习题)模板【练习一、单调栈】739. 每日温度【练习二、单调栈哈希表】496. 下一个更大元素 I【练习三、单调栈循环数组】503. 下一个更大元素 II【练…

Word处理控件Aspose.Words功能演示:使用 C++ 处理 Word 文档中的目录

Aspose API支持流行文件格式处理,并允许将各类文档导出或转换为固定布局文件格式和最常用的图像/多媒体格式。 Aspose.words是一种高级Word文档处理API,用于执行各种文档管理和操作任务。API支持生成,修改,转换,呈现和…

4EVERLAND IPFS CID部署,一键部署Uniswap

近日,4EVERLAND推出IPFS CID部署,开发者可以复制IPFS CID,一键部署到4EVERLAND。 一键部署,无需通过Github Repo,只需要知道CID即可。一键跨平台部署项目到 Arweave 或 ICP。了解IPFS CID,通过4EVERLAND绑…

漫谈广告机制设计 | 开篇语

很久没有写文章了,oCPC实践录的专栏还没有写完,我就换工作了,去了M公司,做的内容与oCPC不怎么相关,对于其中的问题思考也没有那么多了,好在专栏的核心思想已经基本阐明了。在M公司也已经快两年了&#xff0…

青龙+WxPusher实现资产推送

1.首先注册WXpusher: https://wxpusher.zjiecode.com/admin/login 扫码注册创建应用 确定完就会出现一个token,一定先复制保存起来,因为只显示一次,没存后期就只能重置了。 关闭后,这个页面有二维码和链接&#xff0…

CSS定位详解

文章目录定位为什么要使用定位定位的组成定位模式静态定位:按照标准流特性摆放,没有边偏移相对定位:元素在移动位置的时候,是相对于它原来的位置来说的绝对定位:在移动位置的时候相对与祖先元素固定定位:元…

C语言:指针详解

往期文章 C语言:初识C语言C语言:分支语句和循环语句C语言:函数C语言:数组C语言:操作符详解 目录往期文章前言1. 指针是什么2. 指针和指针类型3. 野指针4. 指针运算4.1 指针-整数4.2 指针-指针4.3 指针的关系运算5. 二…

“小灵通”的风雨往事

最近,有一部叫做《狂飙》的国产电视剧火遍全网,相信大家都看到了。在剧中,出现了一个通信名词,不知道在座各位有没有关注到。没错,这个名词,就是“小灵通”。《狂飙》剧的主角高启强,原本是个卖…

Web3.0 · 基础层技术 · SCQA模型趣谈密码学

【小木箱成长营】密码学系列教程: Web3.0 基础层技术 密码学在移动端应用与实践 一、序言 Hello,我是小木箱,欢迎来到小木箱成长营密码学系列教程,今天将分享 Web3.0 基础层技术 SCQA 模型趣谈密码学。 SCQA 模型趣谈密码学主…

第一章 opencv与python介绍及环境搭建

目录1.python安装2.opencv3.pycharm安装4.conda环境搭建(my)1.python安装 网上教程很多就不写了,推荐使用python3.8.2及以上版本 2.opencv opencv简单介绍:opencv是一个开源的计算机视觉库,可以在windows、MacOS、Linux等操作系统上运行。 …