模板字符串【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 …...
突破视频内容壁垒：B站视频转文字的智能解决方案
突破视频内容壁垒：B站视频转文字的智能解决方案 【免费下载链接】bili2text Bilibili视频转文字，一步到位，输入链接即可使用 项目地址: https://gitcode.com/gh_mirrors/bi/bili2text 在信息爆炸的时代，视频已成为知识传播…...
【架构师通关】理发店排队 + 车库停车，大白话秒懂“进程状态模型”与“PV操作
兄弟们，操作系统的进程管理一直是软考里最让人头疼的“硬骨头” 🦴。什么“阻塞”、“挂起”、“信号量”、“PV操作”，听着就像天书 📚。 但今天，飞哥绝不跟你拽学术名词！咱们就通过“去理发店剪个头” &a…...
用C++实现LBM格子玻尔兹曼方法MRT模拟加热气泡脱离
lbm格子玻尔兹曼方法mrt模拟加热气泡脱离c代码最近在研究流体力学相关的模拟，其中LBM（格子玻尔兹曼方法）的MRT（多松弛时间）模型在模拟加热气泡脱离这类复杂现象时展现出独特的优势。今天就来和大家分享一下如何用C 实现…...
ModTheSpire模组加载器全攻略：从入门到精通的玩家实用指南
ModTheSpire模组加载器全攻略：从入门到精通的玩家实用指南 【免费下载链接】ModTheSpire External mod loader for Slay The Spire 项目地址: https://gitcode.com/gh_mirrors/mo/ModTheSpire 一、初识ModTheSpire：模组世界的钥匙 🗝️…...
记录一次bug：不可见字符/零宽字符
1. 现象在处理 CSV 文件导入时，你可能遇到过这种“灵异事件”：CSV 文件第一列叫 tag_id。程序用 encoding/csv 读进 Map 后，尝试用 mp["tag_id"] 取值。结果： 永远返回空值，但打印整个 Map 时，肉…...
SecGPT-14B模型压力测试：验证OpenClaw高并发安全任务的稳定性
SecGPT-14B模型压力测试：验证OpenClaw高并发安全任务的稳定性 1. 测试背景与目标 最近在探索如何将OpenClaw与安全大模型结合，构建一个自动化安全分析助手。SecGPT-14B作为一款专注于网络安全的大模型，理论上可以处理端口扫描、日志分析等任…...
MSF（etasploit Framework）工具使用与实战
MSF工具介绍工具简介全称Metasploit Framework，是漏洞研究、渗透测试、漏洞验证的一体化平台，主要有以下五大核心模块： Auxiliary（辅助模块）：漏洞扫描、信息收集、端口扫描、服务探测（无攻击载荷…...
低代码平台会取代程序员吗？面向软件测试从业者的专业深度分析
在数字化转型浪潮席卷各行各业的当下，低代码开发平台以其“可视化”、“拖拽式”和“快速交付”的特点，迅速成为企业信息化建设的热门工具。随之而来的，是一个萦绕在技术圈，尤其是软件开发与测试从业者心头的疑问：低代…...
如何通过4个步骤让百度网盘下载速度提升30倍？
如何通过4个步骤让百度网盘下载速度提升30倍？ 【免费下载链接】baidu-wangpan-parse 获取百度网盘分享文件的下载地址 项目地址: https://gitcode.com/gh_mirrors/ba/baidu-wangpan-parse 还在为百度网盘几十KB的下载速度而焦虑吗？百度网盘直链解…...
AI辅助开发新范式：让快马AI成为你的智能代码库与协作者
最近在整理自己的代码库时，发现一个痛点：随着项目积累，很多实用的代码片段散落在各处，虽然写了注释，但时间久了还是很难快速找到需要的部分。于是萌生了一个想法——开发一个AI辅助的代码片段管理工具。这个工具不仅能…...