当前位置: 首页 > news >正文

优雅而高效的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——模板字面量

&#x1f928;博主&#xff1a;小猫娃来啦 &#x1f928;文章核心&#xff1a;优雅而高效的JavaScript——模板字面量 文章目录 什么是模板字面量使用模板字面量插入变量处理多文本模板字面量的高级应用标签模板字量自定义模板字面量函数 常见应用场景拼接字符串HTML模板SQL查询…...

Python一步到位实现图像转PDF自动化处理详解

什么是 img2pdf 库&#xff1f; img2pdf 是一个 Python 库&#xff0c;它可以让你轻松地把多张图像转换为 PDF 文件。它支持多种图像格式&#xff0c;如 JPG, PNG, GIF, BMP 等&#xff0c;并且可以自动调整图像的大小和方向&#xff0c;以适应 PDF 的页面大小和方向。它还可以…...

基于IDEA集成环境---Nacos安装

Nacos服务器是独立安装部署的&#xff0c;因此我们需要下载最新的Nacos服务端程序&#xff0c;下载地址&#xff1a;https://github.com/alibaba/nacos。 将文件进行解压&#xff0c;得到以下内容&#xff1a; 直接将其拖入到项目文件夹下&#xff0c;便于我们一会在IDEA内部…...

使用 puppeteer 加载 html 文件来运行 js 文件

遇到一个需求, 在浏览器环境下来运行 js sdk 文件, 这个 js 文件是不能运行在 nodejs 环境下的; 所以通过 puppeteer 无头浏览器来运行代码获取对应的结果。 首先是安装插件 puppeteer&#xff0c;然后创建一个项目, 我这里是express&#xff1b; 这里是主要的代码。 const p…...

Java 操作 Excel:生成数据、设置单元格样式、设置数据有效性(hutool)

必读信息 该篇文章&#xff0c;主要通过 Java 代码对 Excel 文件的常用操作&#xff0c;包括&#xff1a;生成表格、修改单元格样式、设置数据有效性。 该篇文章&#xff0c;在官网文献下增加个人的看法和理解&#xff0c;如文中有出现不符、错误或需要补充的地方&#xff0c…...

YOLOv5算法改进(11)— 主干网络介绍(MobileNetV3、ShuffleNetV2和GhostNet)

前言:Hello大家好,我是小哥谈。主干网络通常指的是深度学习中的主干模型,通常由多个卷积层和池化层组成,用于提取输入数据的特征。在训练过程中,主干网络的参数会被不断优化以提高模型的准确性。YOLOv5算法中的主干网络可以有多种替换方案,为了后面讲解的方便,本篇文章就…...

ideal远程Debug部署在服务器上的服务详解

ideal远程Debug部署在服务器上的服务详解 一 简介二 ideal配置步骤第一步&#xff1a;点击Edit Configurations选项添加远程连接第二步&#xff1a;配置Remote JVM debug参数第三步&#xff1a;服务的启动参数中添加第二步生成的命令并重新启动服务第四步&#xff1a;ideal启动…...

基于SSM的校园音乐平台系统

基于SSM的校园音乐平台系统~ 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringSpringMVCMyBatisVue工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 主页 登录界面 管理员界面 歌手管理 歌曲管理 摘要 校园音乐平台系统&#xff08;Campus Mu…...

07_03文件系统怎么玩的

文件系统 Linux将文件系统分为了两层&#xff1a;VFS&#xff08;虚拟文件系统&#xff09;、具体文件系统&#xff0c;如下图所示&#xff1a; VFS&#xff08;Virtual Filesystem Switch&#xff09;称为虚拟文件系统或虚拟文件系统转换&#xff0c;是一个内核软件层&#…...

php实战案例记录(24)不要键名只保留值的算法

php中对数组 $originalArray array( “name” > “John”, “age” > 25, “city” > “New York” )仅去除键名保留值的算法是什么 array_values() 函数 在 PHP 中&#xff0c;你可以使用 array_values() 函数来去掉数组的键名。该函数会返回一个新数组&#xff0c…...

【交付高质量,用户高增长】-用户增长质量保证方法论 | 京东云技术团队

前言 俗话说&#xff0c;“测试是质量的守护者”&#xff0c;但单凭测试本身却远远不够。大多数情况下&#xff0c;测试像“一面镜子”&#xff0c;照出系统的面貌&#xff0c;给开发者提供修改代码的依据&#xff0c;这个“照镜子”的过程&#xff0c;就是质量评估的过程&…...

LMI FocalSpec 3D线共焦传感器 使用笔记1

一.硬件介绍 以上特别注意: 屏蔽线必须接地,因为在现场实际调试中,使用软件调试发现经常 弹窗 传感器丢失警告!! 以上 Position LED 的灯被钣金挡住,无法查看异常现象,能否将指示灯设置在软件界面上? 需要确认是软触发还是硬触发,理论上 硬触发比软触发速度要快.(我们目前使用…...

四、RocketMQ发送普通消息、批量消息和延迟消息

Producer发送普通消息的方式 1.同步发送消息 同步消息代表发送端发送消息到broker之后&#xff0c;等待消息发送结果后&#xff0c;再次发送消息 实现步骤 创建生产端&#xff0c;声明在哪个生产组注册NameServer地址构建Message实体&#xff0c;指定topic、tag、body启动…...

idea自定义 postfix completion提高编码效率

postfix completion的使用 详情见&#xff1a; https://www.cnblogs.com/expiator/p/17380495.html 自定义 postfix completion List、 String 初始化list&#xff1a; key: list表达式&#xff1a; List<$EXPR$> $END$List new ArrayList<>();字符串判空&…...

解锁学习电路设计的正确姿势!

...

【Linux】 ps命令使用

作为一个后端的程序员&#xff0c;我们经常用到ps -ef | grep XXX 到底什么事ps呢。 下面我们一起学习一下吧、 ps &#xff08;英文全拼&#xff1a;process status&#xff09;命令用于显示当前进程的状态&#xff0c;类似于 windows 的任务管理器。 ps命令 -Linux手册页 …...

打造高效的分布式爬虫系统:利用Scrapy框架实现

在大数据时代的今天&#xff0c;爬虫系统成为了获取和分析海量数据的重要工具。本文将介绍如何使用Scrapy框架来构建一个高效的分布式爬虫系统&#xff0c;以加速数据采集过程和提高系统的可扩展性。 Scrapy框架简介 Scrapy是一个基于Python的强大的开源网络爬虫框架&#xff…...

SpringCloud组件Ribbon的IRule的问题排查

最近很久没有写文章啦&#xff0c;刚好遇到了一个问题&#xff0c;其实问题也挺简单&#xff0c;但是还是得对源码有一定了解才能够发现。 最近在实现一个根据请求流量的标签&#xff0c;将请求转发到对应的节点&#xff0c;其实和俗称的灰度请求有点相似&#xff0c; 实现思…...

比较完整一些chatGPT项目代码(权威)

https://gitee.com/zccbbg/chatgpt-springboot-service yml中的配置文件无法读取&#xff0c;前端访问比较困难。...

Python - 生成二维码、条形码

二维码 import qrcode# 要生成的文本或链接 data "要生成的文本或链接"# 创建QR码对象 qr qrcode.QRCode(version1, # 版本号&#xff0c;通常设置为1error_correctionqrcode.constants.ERROR_CORRECT_L, # 错误修正级别box_size10, # 每个小方块的像素大小bor…...

云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

地震勘探——干扰波识别、井中地震时距曲线特点

目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波&#xff1a;可以用来解决所提出的地质任务的波&#xff1b;干扰波&#xff1a;所有妨碍辨认、追踪有效波的其他波。 地震勘探中&#xff0c;有效波和干扰波是相对的。例如&#xff0c;在反射波…...

在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能

下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能&#xff0c;包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...

循环冗余码校验CRC码 算法步骤+详细实例计算

通信过程&#xff1a;&#xff08;白话解释&#xff09; 我们将原始待发送的消息称为 M M M&#xff0c;依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)&#xff08;意思就是 G &#xff08; x ) G&#xff08;x) G&#xff08;x) 是已知的&#xff09;&#xff0…...

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中&#xff0c;每个页面需要使用ref&#xff0c;onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入&#xff0c;需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时&#xff0c;需结合业务场景设计数据流转链路&#xff0c;重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点&#xff1a; 一、核心对接场景与目标 商品数据同步 场景&#xff1a;将1688商品信息…...

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

el-switch文字内置

el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器&#xff0c;其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机&#xff08;Virtual Host&#xff09;。 1. 简介 Nginx 使用 server_name 指令来确定…...

C# 求圆面积的程序(Program to find area of a circle)

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...