模板字符串【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 …...
接口测试中缓存处理策略
在接口测试中，缓存处理策略是一个关键环节，直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性，避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明： 一、缓存处理的核…...
第19节 Node.js Express 框架
Express 是一个为Node.js设计的web开发框架，它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用，和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...
label-studio的使用教程(导入本地路径)
文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...
MVC 数据库
MVC 数据库 引言 在软件开发领域，Model-View-Controller（MVC）是一种流行的软件架构模式，它将应用程序分为三个核心组件：模型（Model）、视图（View）和控制器（Controller）。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系，以…...
OkHttp 中实现断点续传 demo
在 OkHttp 中实现断点续传主要通过以下步骤完成，核心是利用 HTTP 协议的 Range 请求头指定下载范围： 实现原理 Range 请求头：向服务器请求文件的特定字节范围（如 Range: bytes1024-） 本地文件记录：保存已…...
在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用
1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...
《C++ 模板》
目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板，就像一个模具，里面可以将不同类型的材料做成一个形状，其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式：templa…...
处理vxe-table 表尾数据是单独一个接口，表格tableData数据更新后，需要点击两下，表尾才是正确的
修改bug思路： 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑：async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...
深度学习水论文：mamba＋图像增强
🧀当前视觉领域对高效长序列建模需求激增，对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模，以及动态计算优势，在图像质量提升和细节恢复方面有难以替代的作用。 🧀因此短时间内，就有不…...
day36-多路IO复用
一、基本概念 （服务器多客户端模型） 定义：单线程或单进程同时监测若干个文件描述符是否可以执行IO操作的能力 作用：应用程序通常需要处理来自多条事件流中的事件，比如我现在用的电脑，需要同时处理键盘鼠标…...