JavaScrip-模版字符串的详解

news/2025/3/30 6:46:42/

1.模版字符串的详解

1.1 模版字符串的使用方法

在ES6之前,如果我们想要将字符串和一些动态的变量(标识符)拼接到一起,是非常丑陋的(ugly)

ES6允许我们使用模版字符串来嵌入变量或者表达式来进行拼接

  • 首先,我们会使用``符号来编写字符串,称之为模版字符串
  • 其次,在模版字符串中,我们可以通过${expression}来动态嵌入内容
//  1.Es6之前const name = "why"const age = 18//  const info = "my name is" + name +", age is " + age
//2.Es6之后
const info = ` ma name is ${name} ,age is  ${age}`

1.2 标签字符串的详细使用

  • 模版字符串还有另外一种用法:标签模版字符串(Targged Template Literals)
  • 我们来看一个普通的JavaScript的函数
function foo(...args){console.log("参数",args)}
foo("why",18,1.88)

image-20250308131746811

  • 如果我们使用标签模版字符串,并且在调用的时候插入其他的变量
    1. 模版字符串被拆分了
    2. 第一个元素是数组,是被模块字符串拆分的字符串组合
    3. 后面的源塑胶是一个个模版字符串传入的内容
//2.标签模版字符串的用法
function foo(...args){console.log("参数",args)}
// foo("why",18,1.88)
//反引号也可以调用函数的  并且会将反引号里面的内容传入函数里面去foo`my name is ${name},age is ${age}`

image-20250308132030225

说了这么多,听着是否有点抽象,但是后续在我们的React框架中会用到 (css in js)

如何将css写到js里面呢,我们会用到React的styled-components库

2.ES6函数的增强用法

  • 在ES6之前,我们编写的函数参数是没有默认值的,所以我们在编写函数时,如果有下面的需求:
    • 传入了参数,那么使用默认参数
    • 没有传入参数,那么使用一个默认值
  • 而在ES6中,我们允许给函数一个默认值:

2.1 函数默认值的补充

  • 默认值也可以和函数解构一起来使用

http://www.ppmy.cn/news/1583438.html

相关文章

用DrissionPage升级网易云音乐爬虫:更稳定高效地获取歌单音乐(附原码)

一、传统爬虫的痛点分析 原代码使用requests re的方案存在以下局限性: 动态内容缺失:无法获取JavaScript渲染后的页面内容 维护成本高:网页结构变化需频繁调整正则表达式 反爬易触发:简单请求头伪造容易被识别 资源消耗大&am…

Linux编译器gcc/g++使用完全指南:从编译原理到动静态链接

一、gcc/g基础认知 在Linux开发环境中,gcc和g是我们最常用的编译器工具: gcc:GNU C Compiler,专门用于编译C语言程序g:GNU C Compiler,用于编译C程序(也可编译C语言) &#x1f4cc…

为AI聊天工具添加一个知识系统 之150 设计重审 之15 完整方案及评估 之3

本文要点 因果关系,逻辑关系,信念关系。 要点 集监管控于一身的 supervisor 监(EC理念 行列式 哈斯图:form(介观链 - 介子 观察者 链式 连接路径 - 迁流函件) :: kind) 管 (DP信念 参与矩阵 KV :t…

HTTP 核心知识点整理

1. HTTP 基础 ​定义:HTTP(HyperText Transfer Protocol)是应用层协议,基于 ​请求-响应模型,用于客户端(浏览器)与服务器之间的通信。​特点: ​无状态:每次请求独立&a…

爬虫案例-爬取某站视频

文章目录 1、下载FFmpeg2、爬取代码3、效果图 1、下载FFmpeg FFmpeg是一套可以用来记录、转换数字音频、视频,并能将其转化为流的开源计算机程序。 点击下载: ffmpeg 安装并配置 FFmpeg 步骤: 1.下载 FFmpeg: 2.访问 FFmpeg 官网。 3.选择 Wi…

蓝桥杯嵌入式十六届模拟三

由硬件框图可以知道我们要配置LED 和按键 一.LED 先配置LED的八个引脚为GPIO_OutPut,锁存器PD2也是,然后都设置为起始高电平,生成代码时还要去解决引脚冲突问题 二.按键 按键配置,由原理图按键所对引脚要GPIO_Input 生成代码,在文件夹中添加code文件夹,code中添加fun.…

长江学者答辩ppt_特聘教授ppt案例_校企联聘ppt制作_青年项目ppt模板

“长江学者奖励计划”是高层次人才队伍建设的引领性工程。 为落实科教兴国战略,延揽海内外中青年学界精英,培养造就高水平学科带头人,启动实施了“长江学者奖励计划”。 / 长江学者答辩ppt案例 长江学者特聘教授答辩PPT设计 长江学者PPT项…

【大模型学习】什么是具身智能

目录 一、技术背景与历史发展 二、什么是具身智能? 三、技术要点及具体实现细节 1. 感知技术: 2. 运动控制: 3. 学习机制: 4. 人机交互: 四、架构 五、应用 六、实际应用案例 一、技术背景与历史发展 人工智能的…