模板字符串【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 …...
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...
Qt Http Server模块功能及架构
Qt Http Server 是 Qt 6.0 中引入的一个新模块，它提供了一个轻量级的 HTTP 服务器实现，主要用于构建基于 HTTP 的应用程序和服务。 功能介绍： 主要功能 HTTP服务器功能： 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...
什么是EULA和DPA
文章目录 EULA（End User License Agreement）DPA（Data Protection Agreement）一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA（End User License Agreement） 定义： EULA即…...
前端开发面试题总结-JavaScript篇(一)
文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包（Closure）？闭包有什么应用场景和潜在问题？2.解释 JavaScript 的作用域链（Scope Chain） 二、原型与继承3.原型链是什么？如何实现继承&a…...
Python 包管理器 uv 介绍
Python 包管理器 uv 全面介绍 uv 是由 Astral（热门工具 Ruff 的开发者）推出的下一代高性能 Python 包管理器和构建工具，用 Rust 编写。它旨在解决传统工具（如 pip、virtualenv、pip-tools）的性能瓶颈，同时…...
接口自动化测试：HttpRunner基础
相关文档 HttpRunner V3.x中文文档 HttpRunner 用户指南 使用HttpRunner 3.x实现接口自动化测试 HttpRunner介绍 HttpRunner 是一个开源的 API 测试工具，支持 HTTP(S)/HTTP2/WebSocket/RPC 等网络协议，涵盖接口测试、性能测试、数字体验监测等测试类型…...
Go语言多线程问题
打印零与奇偶数（leetcode 1116） 方法1：使用互斥锁和条件变量 package mainimport ("fmt""sync" )type ZeroEvenOdd struct {n intzeroMutex sync.MutexevenMutex sync.MutexoddMutex sync.Mutexcurrent int…...
【HarmonyOS 5】鸿蒙中Stage模型与FA模型详解
一、前言 在HarmonyOS 5的应用开发模型中，featureAbility是旧版FA模型（Feature Ability）的用法，Stage模型已采用全新的应用架构，推荐使用组件化的上下文获取方式，而非依赖featureAbility。 FA大概是API7之…...
【iOS】 Block再学习
iOS Block再学习 文章目录 iOS Block再学习前言Block的三种类型__ NSGlobalBlock____ NSMallocBlock____ NSStackBlock__小结 Block底层分析Block的结构捕获自由变量捕获全局(静态)变量捕获静态变量__block修饰符forwarding指针 Block的copy时机block作为函数返回值将block赋给…...
动态规划-1035.不相交的线-力扣(LeetCode)
一、题目解析 光看题目要求和例图，感觉这题好麻烦，直线不能相交啊，每个数字只属于一条连线啊等等，但我们结合题目所给的信息和例图的内容，这不就是最长公共子序列吗？，我们把最长公共子序列连线起…...