优雅而高效的JavaScript——模板字面量
🤨博主:小猫娃来啦
🤨文章核心:优雅而高效的JavaScript——模板字面量
文章目录
- 什么是模板字面量
- 使用模板字面量插入变量
- 处理多文本
- 模板字面量的高级应用
- 标签模板字量
- 自定义模板字面量函数
- 常见应用场景
- 拼接字符串
- HTML模板
- SQL查询
- 文件路径拼接
- 与统字符串拼接的比较
什么是模板字面量
- 模板字面量的定义
模板字面量是一种更强大、更灵活的字符串表示方式,使用反引号()包裹。与传统的字符串表示方式相比,模板字量允许在字符串中插入变量、表达式和原始字符串,并且支持多行文本的处理。
- 模板字面量的特点
- 使用反引号(`)包裹字符串,使得字符串更清晰易读。
- 使用
${}
语法可以在字符串中插入变量和表达式。- 支持多行文本的处理,不再需要手动添加换行符。
使用模板字面量插入变量
- 使用
${}
语法插入变量
使用${}
语法可以在模板字面量中插入变量,例如
const name = 'Alice';
const message = `Hello, ${name}!`;
console.log(message); // Hello, Alice!
- 嵌套插入变量
模板字面量允许在${}
语法中嵌套插入变量,例如:
const = 'John';
const lastName = 'Doe';
const fullName = `${firstName} ${lastName}`;
const message = `Hello, ${fullName}!`;
console.log(message); // Hello, John Doe!
- 插入表达式
除了插入变量,模板字面量还可以插入任意的JavaScript表达式,例如:
const num1 = 5;
const num2 = 10;
const sum =The sum of ${num1} and ${num2} is ${num1 + num}.`;
console.log(sum); // The sum of 5 and 10 is 15
- 插入原始字符串
在模板字面量中插入原始字符串时,可以使用${}
语法的原始字符串形式,例如:
const rawString = String.raw`HelloWorld`;
console.log(rawString); // Hello\nWorld
处理多文本
- 使用模板字面量的多行文本
模板字面量可以直接处理多行文本,不再需要手动添加换行符,例如:
const message = `This a
multi-line
text.`;
console.log(message);
// This is a
//-line
// text.
- 多行文本的缩进和格式化
模板字面量支持多行文本的缩进和格式化,可以使用${}
语法嵌套实现,例如:
const indentExample = `This is an exampleof ind text.`;
console.log(indentExample);
// This is an example
// of indented text.
- 多行文本转义字符
在模板字面量中使用多行文本时可以使用转义字符来处理特殊字符,例如:
constExample = `This is a\`
multi-line\`
text.`;
console.log(escapeExample);
// This is a
// multi-line
// text.
模板字面量的高级应用
标签模板字量
标签模板字面量是一种使用自定义函数处理板字面量的方式,可以在${}
语法前添加一个函数名作为前缀,例如:
function greeting(strings, ...values) {return `${strings[0]}${values[0].toUpperCase()}strings[1]}`;
}
const name = 'alice';
const message = greeting`Hello ${name}!`;
console.log(message); // Hello, ALICE!
自定义模板字面量函数
可以自定义模板字面量函数来处理特定的逻辑,例如:
function multiplier(strings, ...values) {const num = Number(values[]);return strings[0] + (num * 2) + strings[1];
}
const value = 5;
const result = multiplier`The result is: ${value}.`;
console.log(result); // The result is: 10.
常见应用场景
拼接字符串
模板字面量可用于更简洁拼接字符串,特别是含有变量和表达式的情况,例如:
const name = 'Garfield';
const age = 30;
const message = `My name is ${name} and I am ${age} years old.`;
console.log(message); // My name Garfield and I am 30 years old.
HTML模板
const data = { name: 'Alice', age: 30 };
const html = `<div><h1>${data.name}</h1><p>Age: ${data.age}</p></div>
`;
console.log(html);
// <div>
// <h1>Alice</h1>
// <p>Age: 30</p>
// </div>
SQL查询
在构建SQL查询时,模板字面量可用于拼接SQL语句和插入变量,例如:
const firstName = '菲猫';
const lastName = '加';
const query = `SELECT *FROM usersWHERE first_name = '${firstName}'AND last_name = '${lastName}'
`;
console.log(query);
// SELECT *
// FROM users
// WHERE first_name = '菲猫'
// AND last_name = '加'
在这或许有很多没有接触过sql语句的程序员
那么我稍微解释一下:
SELECT * FROM users WHERE first_name = ‘菲猫’ AND last_name = ‘加’ 这是个SQL查询语句
SELECT
表示查询*
表示所有,FORM
表示来自,users
是数据表的名字,WHERE
是条件语句first_name = 'Alice' AND last_name = 'Smith'
是查询条件
翻译为:在用户表中查询first_name(名)是菲猫,并且 last_name(姓氏)是加的用户的所有信息
文件路径拼接
模板字面量还可以方便地拼接文件路径,特别是需要插入变量的情况,例如:
const dir = 'path/to';file = 'index.html';
const filePath = `${dir}/${file}`;
console.log(filePath); // path/to/index.html
与统字符串拼接的比较
- 效率比较
与传统字符串拼接相比,模板字面量通常在运行时更高效。由于模板字面量的编译阶段已经将变量和表达式嵌入到字符串中,不需要运行时的拼接操作,因此更快速。
- 可读性比较
模板字面量可以更清晰地展示字符串中的变量和表达式,使得代码更易读和维护。传统字符串拼接可能会导致代码难以阅读和理解,尤其是在包含多个变量和表达式的情况下。
- 安全性比较
使用模板字面量可以更有效地避免注入攻击。由于模板字面量对变量和表达式的处理是在编译阶段完成的,可以确保在运行时不会执行不安全的代码。
关于模板字符串就介绍到这里啦
相关文章:
优雅而高效的JavaScript——模板字面量
🤨博主:小猫娃来啦 🤨文章核心:优雅而高效的JavaScript——模板字面量 文章目录 什么是模板字面量使用模板字面量插入变量处理多文本模板字面量的高级应用标签模板字量自定义模板字面量函数 常见应用场景拼接字符串HTML模板SQL查询…...
Python一步到位实现图像转PDF自动化处理详解
什么是 img2pdf 库? img2pdf 是一个 Python 库,它可以让你轻松地把多张图像转换为 PDF 文件。它支持多种图像格式,如 JPG, PNG, GIF, BMP 等,并且可以自动调整图像的大小和方向,以适应 PDF 的页面大小和方向。它还可以…...
基于IDEA集成环境---Nacos安装
Nacos服务器是独立安装部署的,因此我们需要下载最新的Nacos服务端程序,下载地址:https://github.com/alibaba/nacos。 将文件进行解压,得到以下内容: 直接将其拖入到项目文件夹下,便于我们一会在IDEA内部…...
使用 puppeteer 加载 html 文件来运行 js 文件
遇到一个需求, 在浏览器环境下来运行 js sdk 文件, 这个 js 文件是不能运行在 nodejs 环境下的; 所以通过 puppeteer 无头浏览器来运行代码获取对应的结果。 首先是安装插件 puppeteer,然后创建一个项目, 我这里是express; 这里是主要的代码。 const p…...
Java 操作 Excel:生成数据、设置单元格样式、设置数据有效性(hutool)
必读信息 该篇文章,主要通过 Java 代码对 Excel 文件的常用操作,包括:生成表格、修改单元格样式、设置数据有效性。 该篇文章,在官网文献下增加个人的看法和理解,如文中有出现不符、错误或需要补充的地方,…...
YOLOv5算法改进(11)— 主干网络介绍(MobileNetV3、ShuffleNetV2和GhostNet)
前言:Hello大家好,我是小哥谈。主干网络通常指的是深度学习中的主干模型,通常由多个卷积层和池化层组成,用于提取输入数据的特征。在训练过程中,主干网络的参数会被不断优化以提高模型的准确性。YOLOv5算法中的主干网络可以有多种替换方案,为了后面讲解的方便,本篇文章就…...
ideal远程Debug部署在服务器上的服务详解
ideal远程Debug部署在服务器上的服务详解 一 简介二 ideal配置步骤第一步:点击Edit Configurations选项添加远程连接第二步:配置Remote JVM debug参数第三步:服务的启动参数中添加第二步生成的命令并重新启动服务第四步:ideal启动…...
基于SSM的校园音乐平台系统
基于SSM的校园音乐平台系统~ 开发语言:Java数据库:MySQL技术:SpringSpringMVCMyBatisVue工具:IDEA/Ecilpse、Navicat、Maven 系统展示 主页 登录界面 管理员界面 歌手管理 歌曲管理 摘要 校园音乐平台系统(Campus Mu…...
07_03文件系统怎么玩的
文件系统 Linux将文件系统分为了两层:VFS(虚拟文件系统)、具体文件系统,如下图所示: VFS(Virtual Filesystem Switch)称为虚拟文件系统或虚拟文件系统转换,是一个内核软件层&#…...
php实战案例记录(24)不要键名只保留值的算法
php中对数组 $originalArray array( “name” > “John”, “age” > 25, “city” > “New York” )仅去除键名保留值的算法是什么 array_values() 函数 在 PHP 中,你可以使用 array_values() 函数来去掉数组的键名。该函数会返回一个新数组,…...
【交付高质量,用户高增长】-用户增长质量保证方法论 | 京东云技术团队
前言 俗话说,“测试是质量的守护者”,但单凭测试本身却远远不够。大多数情况下,测试像“一面镜子”,照出系统的面貌,给开发者提供修改代码的依据,这个“照镜子”的过程,就是质量评估的过程&…...
LMI FocalSpec 3D线共焦传感器 使用笔记1
一.硬件介绍 以上特别注意: 屏蔽线必须接地,因为在现场实际调试中,使用软件调试发现经常 弹窗 传感器丢失警告!! 以上 Position LED 的灯被钣金挡住,无法查看异常现象,能否将指示灯设置在软件界面上? 需要确认是软触发还是硬触发,理论上 硬触发比软触发速度要快.(我们目前使用…...
四、RocketMQ发送普通消息、批量消息和延迟消息
Producer发送普通消息的方式 1.同步发送消息 同步消息代表发送端发送消息到broker之后,等待消息发送结果后,再次发送消息 实现步骤 创建生产端,声明在哪个生产组注册NameServer地址构建Message实体,指定topic、tag、body启动…...
idea自定义 postfix completion提高编码效率
postfix completion的使用 详情见: https://www.cnblogs.com/expiator/p/17380495.html 自定义 postfix completion List、 String 初始化list: key: list表达式: List<$EXPR$> $END$List new ArrayList<>();字符串判空&…...
解锁学习电路设计的正确姿势!
...
【Linux】 ps命令使用
作为一个后端的程序员,我们经常用到ps -ef | grep XXX 到底什么事ps呢。 下面我们一起学习一下吧、 ps (英文全拼:process status)命令用于显示当前进程的状态,类似于 windows 的任务管理器。 ps命令 -Linux手册页 …...
打造高效的分布式爬虫系统:利用Scrapy框架实现
在大数据时代的今天,爬虫系统成为了获取和分析海量数据的重要工具。本文将介绍如何使用Scrapy框架来构建一个高效的分布式爬虫系统,以加速数据采集过程和提高系统的可扩展性。 Scrapy框架简介 Scrapy是一个基于Python的强大的开源网络爬虫框架ÿ…...
SpringCloud组件Ribbon的IRule的问题排查
最近很久没有写文章啦,刚好遇到了一个问题,其实问题也挺简单,但是还是得对源码有一定了解才能够发现。 最近在实现一个根据请求流量的标签,将请求转发到对应的节点,其实和俗称的灰度请求有点相似, 实现思…...
比较完整一些chatGPT项目代码(权威)
https://gitee.com/zccbbg/chatgpt-springboot-service yml中的配置文件无法读取,前端访问比较困难。...
Python - 生成二维码、条形码
二维码 import qrcode# 要生成的文本或链接 data "要生成的文本或链接"# 创建QR码对象 qr qrcode.QRCode(version1, # 版本号,通常设置为1error_correctionqrcode.constants.ERROR_CORRECT_L, # 错误修正级别box_size10, # 每个小方块的像素大小bor…...
8+纯生信,多组机器学习+分型探讨黑色素瘤发文思路。
今天给同学们分享一篇泛癌多组机器学习分型的生信文章“Comprehensive characterisation of immunogenic cell death in melanoma revealing the association with prognosis and tumor immune microenvironment”,这篇文章于2022年9月23日发表在Front Immunol 期刊…...
GPU高性能面试-写一个ReduceKernel
要求写一个reduceKernel 要求给出Kerne的完整调用: 1. 进行一维reduce 可以写一个最基础的,仅仅实现基础功能就行 使用share mem进行功能优化 使用shuffles指令完成block reduce操作 2.实现二维reduce...
深入探索STARK的安全性和可靠性——STARKs全面安全分析
1. 引言 non-interactive STARKs,起源于Interactive Oracle Proofs (IOPs),然后通过random oracle模式转换为非交互式。StarkWare团队 ethSTARK Documentation – Version 1.2(2023年7月)论文做了更新,给出了完整具体…...
WPF 控件分辨率自适应问题
WPF 控件分辨率自适应时,我首先想到的是使用ViewBox控件来做分辨率自适应。 ViewBox这个控件通常和其他控件结合起来使用,是WPF中非常有用的控件。定义一个内容容器。ViewBox组件的作用是拉伸或延展位于其中的组件,以填满可用空间࿰…...
CANoe创建仿真工程
CANoe创建仿真工程 写在前面仿真工程的创建创建工程添加CAN数据库添加系统变量创建面板创建网络节点为节点添加代码工程运行测试总结 写在前面 Canoe的安装不是特别方便,我是参加了松勤的培训课程,不仅需要安装软件还需要安装驱动,刚刚学习的…...
Scanner 输入回车跳不出循环的解决方法
题目要求: 输入一行内容包含字符串和数字,将字符串与数字分别提取。 解决方法: 可以使用两个Scanner对象,一个用来键入数据,另外一个用来对数据进行操作,以此来解决输入“回车”跳不出while循环的问题。 i…...
docker 启动 mysql 通过防火墙设置端口无法访问解决方案
1、问题描述:通过 docker compose 启动mysql服务,然而在防火墙添加了3306端口后却无法访问,但是关闭防火墙后又可以访问mysql数据库。 解决方案: 重启 docker 后解决:systemctl restart docker 如果没有解决问题则执…...
智能制造优化,RFID生产线管理系统解决方案
一、背景介绍 随着全球经济的发展,传统制造业面临着越来越高的成本和低利润的挑战,为了提升企业的整体利润率,优化管理流程成为必要的手段之一,在传统的制造企业中,生产线通常采用单件流生产模式,但这种模…...
【Mybatis】基于Mybatis插件+注解,实现敏感数据自动加解密
一、介绍 业务场景中经常会遇到诸如用户手机号,身份证号,银行卡号,邮箱,地址,密码等等信息,属于敏感信息,需要保存在数据库中。而很多公司会会要求对数据库中的此类数据进行加密存储。 敏感数据…...
【特纳斯电子】基于物联网的指纹密码锁系统设计-实物设计
资料下载链接:基于物联网的指纹密码锁系统设计-实物设计 - 电子校园网 编号: T3732205M-SW 设计简介: 本设计是基于单片机的指纹密码锁,主要实现以下功能: 1、可通过密码解锁 2、可通过云平台解锁 3、可通过指纹解…...
【牛客面试必刷TOP101】Day9.BM37 二叉搜索树的最近公共祖先和BM42 用两个栈实现队列
作者简介:大家好,我是未央; 博客首页:未央.303 系列专栏:牛客面试必刷TOP101 每日一句:人的一生,可以有所作为的时机只有一次,那就是现在!!!&…...
10.12 校招 实习 内推 面经
绿*泡*泡: neituijunsir 交流裙 ,内推/实习/校招汇总表格 1、校招 | 2024届秋招,美团哪些校招岗位最缺人?(内推) 校招 | 2024届秋招,美团哪些校招岗位最缺人?(内推&…...
redis 生成流水工具类
使用redis存储流水号,代码如下: import cn.hutool.core.date.DateUtil; import org.springframework.data.redis.core.RedisTemplate; import org.springframework.stereotype.Component;Component public class RedisSerialUtil {private RedisTemplate…...
BGP服务器租用腾讯云和阿里云价格对比
BGP云服务器像阿里云和腾讯云均是BGP多线网络,速度更快延迟更低,阿里云BGP服务器2核2G3M带宽优惠价格108元一年起,腾讯云BGP服务器2核2G3M带宽95元一年起,阿腾云atengyun.com分享更多云服务器配置如2核4G、4核8G、8核16G等配置价格…...
PyTorch 深度学习之多分类问题Softmax Classifier(八)
1. Revision: Diabetes dataset 2. Design 10 outputs using Sigmoid? 2.1 Output a Distribution of prediction with Softmax 2.2 Softmax Layer Example, 2.3 Loss Function-Cross Entropy Cross Entropy in Numpy Cross Entropy in PyTorch 注意交叉熵损失,最…...
抖音直播招聘小程序可以增加职位展示,提升转化率,增加曝光度
抖音直播招聘报白是指进入抖音的白名单,允许在直播间或小视频中发布招聘或找工作等关键词。否则会断播、不推流、限流。抖音已成为短视频流量最大的平台,但招聘企业数量较少。抖音招聘的优势在于职位以视频、直播方式展示,留存联系方式更加精…...
论文阅读之《Learn to see in the dark》
Learning to See in the Dark-CVPR2018 Chen ChenUIUC(伊利诺伊大学厄巴纳-香槟分校) Qifeng Chen, Jia Xu, Vladlen Koltun Intel Labs(英特尔研究院) 文章链接:https://arxiv.org/pdf/1805.01934.pdfhttps://arxiv.org/pdf/1805.01934.p…...
Docker 生成自定义镜像并使用Docker Compose部署
Docker 生成自定义镜像并使用Docker Compose部署 Docker Compose 是一个用于定义和运行多个 Docker 容器的工具,可以轻松管理复杂的应用程序。本文将介绍如何在 Docker Compose 中使用自定义 Docker 镜像,并提供了生成自定义 Docker 镜像的步骤。 步骤…...
设计模式~调停者(中介者)模式(Mediator)-21
调停者(中介者)模式(Mediator) (1)优点 (2)缺点 (3)使用场景 (4)注意事项: (5)应用实例: 代码 调停者&a…...
计算机毕业设计选什么题目好?springboot 医院门诊在线预约挂号系统
✍✍计算机编程指导师 ⭐⭐个人介绍:自己非常喜欢研究技术问题!专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目:有源码或者技术上的问题欢迎在评论区一起讨论交流! ⚡⚡ Java实战 |…...
linux中使用ps查看进程的所有线程
在 Linux 系统中,可以使用 ps 命令和 ps H 命令结合来查看进程的线程信息。ps 命令用于显示系统中当前运行的进程信息,而 ps H 命令则可以显示进程中的所有线程。 使用以下命令可以查看指定进程的所有线程信息: ps H -T <PID>将 替换…...
本、硕、博区别真的辣么大吗?
61: 发际线已经说明了一切…… Super Mario: 小学,老师告诉学生:“森林里有只老虎,已经被我关在笼子里,我会带你去那个地方,然后给你一把猎枪,告诉你猎枪怎么用,并开枪…...
[Spring] SpringMVC 简介(一)
目录 一、SpringMVC 简介 1、什么是 MVC 2、什么是 SpringMVC 3、SpringMVC 实现原理 4、SpringMVC 的特点 二、简单案例 1、引入依赖 2、在 web.xml 中配置前端控制器 DispatcherServlet 3、创建 SpringMVC 的配置文件 4、创建请求控制器 5、测试页面 6、访问不到 …...
机器学习基础之《回归与聚类算法(2)—欠拟合与过拟合》
一、背景 1、上一篇说正规方程的时候,实际情况中使用很少,主要原因它不能解决过拟合。 2、训练集上表现的好,测试集上表现不好—过拟合 二、欠拟合和过拟合 1、欠拟合 训练集:有3个训练集,告诉机器都是天鹅 机器学…...
flutter dio 请求封装(空安全)
一、添加依赖 dio: ^5.3.2二、请求封装 class HttpHelper {static Dio? mDio;static BaseOptions? options;static HttpHelper? httpHelper;CancelToken cancelToken CancelToken();static const String GET get;static const String POST post;static const String PU…...
chatgpt GPT-4V是如何实现语音对话的
直接上代码 https://chat.openai.com/voice/get_token 1. 请求内容 Request:GET /voice/get_token HTTP/1.1 Host: ios.chat.openai.com Content-Type: application/json Cookie: _puiduser***Fc9T:16962276****Nph%2Fb**SU%3D; _uasid"Z0FBQUF***nPT0"; __cf_bmBUg…...
C++项目-求水仙花数
求水仙花数 #include <iostream> using namespace std;int main() {int n 100;do {int a 0;int b 0;int c 0;a n % 10; //个位b n / 10 % 10; //十位c n / 100 % 10; //百位if (a * a * a b * b * b c * c * c n) {cout << n << endl;}…...
从零开始基于LLM构建智能问答系统的方案
本文首发于博客 LLM应用开发实践 一个完整的基于 LLM 的端到端问答系统,应该包括用户输入检验、问题分流、模型响应、回答质量评估、Prompt 迭代、回归测试,随着规模增大,围绕 Prompt 的版本管理、自动化测试和安全防护也是重要的话题&#x…...
Android---Synchronized 和 ReentrantLock
Synchronized 基本使用 1. 修饰实例方法 public class SynchronizedMethods{private int sum 0;public synchronized void calculate(){sum sum 1;} } 这种情况下的锁对象是当前实例对象,因此只有同一个实例对象调用此方法才会产生互斥效果;不同的…...
【解题报告】牛客挑战赛70 maimai
题目链接 这个挑战赛的 F F F是我出的,最后 zhoukangyang 爆标了。。。orzorz 记所有有颜色的边的属性集合 S S S 。 首先在外层容斥,枚举 S ∈ [ 0 , 2 w ) S\in [0,2^w) S∈[0,2w),计算被覆盖的的边中不包含 S S S 中属性,…...