模板字符串【ES6】
“路漫漫其修远兮，吾将上下而求索。”—— 屈原《离骚》
目录
- 什么是模板字符串？
- 模板字符串特性及代码举例：
- 详细举例用法：
什么是模板字符串？
模板字符串（Template Literals）是JavaScript中引入的一种新的字符串表示方式，它使用反引号（`）而不是单引号（'）或双引号（"）来定义字符串。
模板字符串特性及代码举例：
- 多行字符串：模板字符串可以直接包含换行符，而不需要使用转义字符（\n）或字符串连接符（+）来连接多行字符串。
let message = `Hello,
world!`;
console.log(message);
//Hello,
//world!
- 嵌入表达式：模板字符串中可以使用${}语法来嵌入表达式。这些表达式会被求值，并将其结果转换为字符串后嵌入到模板字符串中。
let name = "Alice";
let age = 30;
let greeting = `Hello, ${name}! You are ${age} years old.`;
console.log(greeting);// Hello, Alice! You are 30 years old.
- 标签模板：模板字符串前面可以添加一个“标签”函数，该函数可以对模板字符串的内容进行处理，并返回一个结果。这提供了一种高级用法，允许开发者完全控制模板字符串的处理方式。
let name = "Alice";
let age = 30;
function tag (strings, ...values) {console.log(strings); // 模板字符串中的静态部分console.log(values); // 插值表达式的结果return `Tagged template result`;
}let result = tag`My name is ${name} and I am ${age} years old.`;
console.log(result);
- String.raw方法：模板字符串还可以通过String.raw方法来获取“原始”字符串，即不对反斜杠（\）进行转义处理。
let path = `C:\Users\name`;
let rawPath = String.raw`C:\Users\name`;
console.log(path); // 输出: C:\Usersame
console.log(rawPath);// 输出: C:\Users\name
详细举例用法：
${ }里面可以放表达式、+ 、-、*、/、普通变量、三目运算符、调用函数等!!!
<body><ul></ul><style>.active {color: red;}</style><script>let arr = ['kitty', 'Alice', 'Bob'];let newList = arr.map((item, index) => {return `<li class="${index == 0 ? 'active' : ''}"><b>${item}</b></li>`;})console.log(newList);let oul = document.querySelector("ul");oul.innerHTML = newList.join("")</script>
</body>
<body><ul></ul><style>.active {color: red;}</style><script>let name = 'Kitty';let oli = `<li><b> ${name}</b></li>`function test () {return "自定义添加的内容"}let arr = ['kitty', 'Alice', 'Bob'];let newList = arr.map((item, index) => {return `<li class="${index == 0 ? 'active' : ''}"><b>${item}</b>${test()}</li>`;})console.log(newList);let oul = document.querySelector("ul");oul.innerHTML = newList.join("")</script>
</body>
相关文章：
模板字符串【ES6】
“路漫漫其修远兮，吾将上下而求索。”—— 屈原《离骚》 目录 什么是模板字符串？模板字符串特性及代码举例：详细举例用法： 什么是模板字符串？ 模板字符串（Template Literals）是JavaScript中引入…...
通往 AI 之路：Python 机器学习入门-数据结构
Python 数据结构 Python 提供了多种数据结构来存储和操作数据，其中列表（list）、字典（dict）、元组（tuple）和集合（set）是最常用的几种。本章将详细介绍这些数据结构的基本…...
我们应该如何优化UI（基于UGUI）
这是一道面试题，下面，我们来详细分析这个问题。 目录 1. 减少 Draw Call 合理设置图集 避免材质和 Shader 的频繁切换 减少 UI 元素的重叠 2. 优化UI布局 3. 优化UI元素的渲染 4.优化UI动画 5. 优化 UI 事件处理 6. 运行时优化 1. 减少 Draw C…...
CSS3 圆角：实现与优化指南
CSS3 圆角：实现与优化指南 随着网页设计的发展，CSS3 圆角已经成为了现代网页设计中不可或缺的元素之一。本文将详细讲解 CSS3 圆角的基本用法、实现方式以及优化技巧，帮助您在网页设计中更好地运用这一功能。 一、CSS3 圆角基本用法 1.1 基…...
【网络安全 | 扫描子域+发现真实IP】CloakQuest3r安装使用详细教程
原创文章，禁止转载。 本文仅作学习交流使用，不得用于非法渗透，笔者不承担任何责任。 文章目录 简介功能介绍执行流程限制安装步骤可选功能：SecurityTrails API使用示例简介 CloakQuest3r 是一款强大的 Python 工具，专为揭示受 Cloudflare 及类似服务保护的网站真实 IP 地…...
Mellanox OFED驱动如何给全局编译添加gcc的编译选项？（subdir-ccflags-y += -Wall）
背景 有些时候编译驱动需要给全局加一个编译选项，假设configure已经完成。可以直接在Makefile中修改 添加方式 修改OFED驱动目录下的： ./Makefile subdir-ccflags-y -Wall修改效果： 然后执行make，就能让添加的编译选项生效…...
【愚公系列】《Python网络爬虫从入门到精通》037-文件的存取
标题详情作者简介愚公搬代码头衔华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。近期荣誉2022年度…...
【一起学Rust | Tauri2.0框架】单实例应用程序的深入解析：零漏洞实现与优化实战
文章目录 前言一、 单实例应用的意义二、 实现单实例应用的方法1 Windows下的实现1.1 创建命名Mutex1.2 在Tauri应用中集成Mutex检查 2 macOS下的实现2.1 获取Bundle Identifier2.2 检查是否已经有实例在运行 3 Linux下的实现3.1 获取进程列表3.2 检查是否已经有实例在运行 4 在…...
PhyloSuite v1.2.3安装与使用-生信工具049
PhyloSuite 一个好用的win集成建树平台，官方相关文档视频等做的可好了PhyloSuite (jushengwu.com) 官网 https://github.com/dongzhang0725/PhyloSuite/releases #官网 http://phylosuite.jushengwu.com/dongzhang0725.github.io/installation/ #官方说明文档…...
使用Apache Lucene构建高效的全文搜索服务
使用Apache Lucene构建高效的全文搜索服务 在现代应用程序中，全文搜索功能是不可或缺的一部分。无论是电子商务网站、内容管理系统，还是数据分析平台，快速、准确地搜索大量数据是提升用户体验的关键。Apache Lucene 是一个强大的全文搜索引擎…...
SSH远程登录并执行命令
SSH远程登录并执行命令 1、登录远程服务器2、远程执行命令3、远程执行交互命令4、远程执行脚本5、退出远程SSH连接 SSH是Linux中的远程连接管理工具，可以在本地服务器上通过SSH协议连接到远程服务器，并在远程服务器上执行命令 SSH不仅可以用来登录远程服…...
EasyRTC：支持任意平台设备的嵌入式WebRTC实时音视频通信SDK解决方案
随着互联网技术的飞速发展，实时音视频通信已成为各行各业数字化转型的核心需求之一。无论是远程办公、在线教育、智慧医疗，还是智能安防、直播互动，用户对低延迟、高可靠、跨平台的音视频通信需求日益增长。 一、WebRTC与WebP2P：实…...
Golang语言特性
1.Go语言的优势 1.1极简单的部署方式 —可以直接编译成机器码。代码可以直接转换为二进制数据，在操作系统上可以直接./去执行。 —不依赖其他库。最终生成的可执行程序是一个静态的二进制文本文件。 —可以直接运行即可部署。 —静态类型语言。编译的时候检查出来隐…...
LangPrompt提示词
LangPrompt提示词 https://github.com/langgptai/LangGPT 学习LangGPT的仓库，帮我创建 一个专门生成LangGPT格式prompt的助手 根据LangGPT的格式规范设计的专业提示词生成助手框架。以下是分步骤的解决方案： 助手角色定义模板 # Role: LangGPT提示词架…...
Java 容器之 List
在 Java 的集合框架中，List 是 Collection 的重要子接口，以其有序、可重复的特点广泛应用于开发中。本文将详细探讨 List 的核心概念、主要实现类（如 ArrayList 和 LinkedList）的底层原理，以及使用中需要注意的常见问题…...
ETL-kettle数据转换使用详解
一、excel转换成mysql 表格就按照我们刚才转换的表格来转换成MySQL数据 在MySQL数据库中创建数据库，这个根据自身情况。我就在现有test库中测试了。 根据以上步骤，新建转换。 构建流程图，选择excel输入和表输出 将两个组件连接起来 双击…...
【容器化】低版本docker拉取ubuntn 22.04镜像启动容器执行apt update提示 NO_PUBKEY 871920D1991BC93C
前置信息 宿主机信息 [root@localhost ~]# cat /etc/os-release NAME="CentOS Linux" VERSION="7 (Core)" ID="centos" ID_LIKE="rhel fedora" VERSION_ID="7" PRETTY_NAME="CentOS Linux 7 (Core)" ANSI_COLOR…...
Hive-04之存储格式、SerDe、企业级调优
一、主题 hive表的数据压缩和文件存储格式hive的自定义UDF函数hive的JDBC代码操作hive的SerDe介绍和使用hive的优化 二、要点 1. hive表的文件存储格式 Hive支持的存储数的格式主要有：TEXTFILE（行式存储） 、SEQUENCEFILE(行式存储)、ORC&…...
Makefile、Make和CMake：构建工具的三剑客
目录 1. Makefile 2. Make 3. CMake Makefile、Make、CMake的关系 在软件开发中，构建工具是必不可少的。它们帮助开发者自动化编译、链接和打包的过程，确保代码能够高效地转化为可执行文件。Makefile、Make和CMake是三个常见的构建工具，它…...
)
The “Rule-of-Zero“ should be followed (s4963)
Most classes should not directly handle resources, but instead, use members that perform resource handling for them: For memory, it can be std::unique_ptr, std::shared_ptr, std::vector…For files, it can be std::ofstream, std::ifstream…… Classes …...
React 第五十五节 Router 中 useAsyncError的使用详解
前言 useAsyncError 是 React Router v6.4 引入的一个钩子，用于处理异步操作（如数据加载）中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误：捕获在 loader 或 action 中发生的异步错误替…...
8k长序列建模，蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂
蛋白质结合剂（如抗体、抑制肽）在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上，高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术，但这类方法普遍面临资源消耗巨大、研发周期冗长…...
UR 协作机器人「三剑客」：精密轻量担当（UR7e）、全能协作主力（UR12e）、重型任务专家（UR15）
UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中，UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化…...
【JavaWeb】Docker项目部署
引言 之前学习了Linux操作系统的常见命令，在Linux上安装软件，以及如何在Linux上部署一个单体项目，大多数同学都会有相同的感受，那就是麻烦。 核心体现在三点： 命令太多了，记不住 软件安装包名字复杂&…...
中关于正整数输入的校验规则)
Element Plus 表单(el-form)中关于正整数输入的校验规则
目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入（联动）2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...
现有的 Redis 分布式锁库（如 Redisson）提供了哪些便利？
现有的 Redis 分布式锁库（如 Redisson）相比于开发者自己基于 Redis 命令（如 SETNX, EXPIRE, DEL）手动实现分布式锁，提供了巨大的便利性和健壮性。主要体现在以下几个方面： 原子性保证 (Atomicity)ÿ…...
水泥厂自动化升级利器：Devicenet转Modbus rtu协议转换网关
在水泥厂的生产流程中，工业自动化网关起着至关重要的作用，尤其是JH-DVN-RTU疆鸿智能Devicenet转Modbus rtu协议转换网关，为水泥厂实现高效生产与精准控制提供了有力支持。 水泥厂设备众多，其中不少设备采用Devicenet协议。Devicen…...
spring Security对RBAC及其ABAC的支持使用
RBAC (基于角色的访问控制) RBAC (Role-Based Access Control) 是 Spring Security 中最常用的权限模型，它将权限分配给角色，再将角色分配给用户。 RBAC 核心实现 1. 数据库设计 users roles permissions ------- ------…...
Windows 下端口占用排查与释放全攻略
Windows 下端口占用排查与释放全攻略 在开发和运维过程中，经常会遇到端口被占用的问题（如 8080、3306 等常用端口）。本文将详细介绍如何通过命令行和图形化界面快速定位并释放被占用的端口，帮助你高效解决此类问题。 一、准…...
GeoServer发布PostgreSQL图层后WFS查询无主键字段
在使用 GeoServer（版本 2.22.2） 发布 PostgreSQL（PostGIS）中的表为地图服务时，常常会遇到一个小问题： WFS 查询中，主键字段（如 id）莫名其妙地消失了！ 即使你在…...