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

ECMAScript6模板字面量：反引号、${}占位符的使用

news 2026/5/31 12:29:48

ECMAScript 6 中引入了模板字面量，主要通过多行字符串和字符串占位符对字符串进行增强操作。如下：

//使用ECMAScript6模板字面量拼接字符串，例如：2024年8月12日 15:38:28 星期一
let dateRet = `${Year}年${Month}月${Dates}日 ${Hours}:${Minutes}:${Seconds} ${Week}`;

1、反引号的使用

模板字面量的基础语法是使用反引号“`”替换字符串的单引号或双引号。

let str = `月落乌啼霜满天，
江枫渔火对愁眠。
姑苏城外寒山寺，
夜半钟声到客船。`

2、${}占位符的使用

在一个模板字面量中，允许将变量或任何合法的表达式嵌入占位符并将其作为字符串的一部分。字符串占位符使用：${}。

（1）将定义的变量嵌入占位符并将其放在字符串中进行输出。

let name = "Tony";
let sex = "男";
let age = 25;
let str = `姓名：${name} 性别：${sex} 年龄：${age}`;
document.write(str); //输入：姓名：Tony 性别：男 年龄：25

（2）将表达式嵌入占位符并将其放在字符串中进行输出。

let unitPrice = 566;
let number = 6;	
let str = `商品总价：${unitPrice * number}元`;
document.write(str); //输入：商品总价：3396元

3、综合实例

【实例】使用ECMAScript6模板字面量拼接字符串，实现日期时间的显示，执行结果如下图：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ECMAScript6模板字面量</title>
</head>
<body><p id="clock"></p>
</body><script type="text/javascript">
window.onload = function () {realTime(); //获取日期时间setInterval(function() { realTime() }, 1000);  //循环调用
}//获取日期时间
function realTime()
{let dateTime = new Date();let Year = dateTime.getFullYear().toString();let tMonth = String(dateTime.getMonth() + 1);let Month = douPosit(tMonth);let tDates = dateTime.getDate().toString();let Dates = douPosit(dateTime.getDate().toString());let Hours = douPosit(dateTime.getHours().toString());let Minutes = douPosit(dateTime.getMinutes().toString());let Seconds = douPosit(dateTime.getSeconds().toString());let Week = convertDay(dateTime); //获取日期是周几//使用ECMAScript6模板字面量拼接字符串，例如：2024年8月12日 15:38:28 星期一let dateRet = `${Year}年${Month}月${Dates}日 ${Hours}:${Minutes}:${Seconds} ${Week}`;document.getElementById('clock').innerText=dateRet;
}//个位数补两位数
function douPosit(numStr) {if (numStr != null && numStr.length == 1) {numStr = "0" + numStr;}return numStr;
}//获取日期是周几
function convertDay(thisDate) {var dayRet = null;var show_day = new Array('星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六');if (thisDate != null) {var day = thisDate.getDay();dayRet = show_day[day];}return dayRet;
}
</script>
</html>

 

相关文章：

ECMAScript6模板字面量：反引号、${}占位符的使用

ECMAScript 6 中引入了模板字面量&#xff0c;主要通过多行字符串和字符串占位符对字符串进行增强操作。如下&#xff1a; //使用ECMAScript6模板字面量拼接字符串&#xff0c;例如&#xff1a;2024年8月12日 15:38:28 星期一 let dateRet ${Year}年${Month}月${Dates}日 ${H…...

编程日记 2024/8/13 5:10:18

网关与AWS云心跳周期，网关断电或者网络不稳定的离线机制

当mqtt连线建立时, 需要指定keep alive参数,当 iot core在1.5倍 keep alive timeout时长内都没收到任何来自设备端的操作, 例如 ping, subscribe, publish &#xff0c;则会主动将连线中断。如果iot core检测到tcp 连接中断, 会立即中断&#xff1b;如果未检测到则会等到1.5倍 …...

编程日记 2024/8/13 5:08:16

【代码随想录训练营第42期 Day26打卡 贪心Part1 - LeetCode 455.分发饼干 376. 摆动序列 53. 最大子序和

目录 一、贪心 二、题目与题解 题目一&#xff1a;455.分发饼干 题目链接 题解&#xff1a;排序双指针贪心 题目二&#xff1a;376. 摆动序列 题目链接 题解&#xff1a;贪心 题目三&#xff1a;53. 最大子序和 题目链接 题解1&#xff1a;暴力&#xff08;失败&…...

编程日记 2024/8/13 5:07:15

利用有限元法（FEM）模拟电磁场与样品的相互作用

一、引言 电磁场与物质的相互作用是理解光学现象的基础。在实际应用中&#xff0c;激光光束与样品的相互作用通常涉及复杂的电磁场分布&#xff0c;尤其在微纳尺度结构中。因此&#xff0c;使用数值模拟方法如有限元法&#xff08;FEM&#xff09;来模拟电磁场的分布和传播&…...

编程日记 2024/8/13 5:06:14

如何保持git主分支树的整洁

经典应用展示Git版本控制用法 本章将列举Git的一些闪亮特性，期待能够让您爱上Git 文章目录 经典应用展示Git版本控制用法前言一、分支是什么？二、主-分支合并merge三、cherry-pick（精挑细选）四、Rebase（变基）4.1 合并本地分支到主分支4.2 合并本地分支从指定commit开始的…...

编程日记 2024/8/13 5:05:13

Datawhale X 魔搭 AI夏令营 Task1 从零入门AI生图原理实践笔记

赛题内容 参赛者需在可图Kolors模型的基础上训练LoRA模型&#xff0c;生成无限风格&#xff0c;如水墨画风格、水彩风格、赛博朋克风格、日漫风格… 基于LoRA模型生成8张图片组成连贯故事&#xff0c;故事内容可自定义&#xff1b;基于8图故事&#xff0c;评估LoRA风格的美感度…...

编程日记 2024/8/13 5:03:12

Python中将代码打包成exe文件

在Python中将代码打包成exe文件&#xff0c;可以使用PyInstaller工具。以下是使用PyInstaller将Python脚本打包成exe的步骤&#xff1a; 安装PyInstaller&#xff1a; pip install pyinstaller使用PyInstaller打包Python脚本&#xff1a; pyinstaller --onefile your_script…...

编程日记 2024/8/13 5:02:10

【C++ 面试 - 基础题】每日 3 题（十三）

✍个人博客&#xff1a;Pandaconda-CSDN博客 &#x1f4e3;专栏地址&#xff1a;http://t.csdnimg.cn/fYaBd &#x1f4da;专栏简介&#xff1a;在这个专栏中&#xff0c;我将会分享 C 面试中常见的面试题给大家~ ❤️如果有收获的话&#xff0c;欢迎点赞&#x1f44d;收藏&…...

编程日记 2024/8/13 5:01:10

Android中的Binder

binder是Android平台的一种跨进程通信&#xff08;IPC&#xff09;机制&#xff0c;从应用层角度来说&#xff0c;binder是客户端和服务端进行通信的媒介。 ipc原理 ipc通信指的是两个进程之间交换数据&#xff0c;如图中的client进程和server进程。 Android为每个进程提供了…...

编程日记 2024/8/13 5:00:09

记录一次.gitignore 失效问题

前言 今天使用git同步同事的代码时&#xff0c;出现一个问题&#xff0c;.gitignore限制失效&#xff0c;导致我本地生成的临时缓存文件被跟踪到了commit中&#xff0c;执行 git rm --cache .后再add commit也不行&#xff0c;很奇怪就研究了一下&#xff0c;下面将我的解决方…...

编程日记 2024/8/13 4:59:08

Eclipse 工作空间

Eclipse 工作空间 Eclipse 工作空间&#xff08;Workspace&#xff09;是 Eclipse IDE 中一个核心概念&#xff0c;它指的是一个用于组织和存储开发项目及相关文件的目录。在 Eclipse 中&#xff0c;所有开发活动都是围绕工作空间展开的。本文将详细介绍 Eclipse 工作空间的概…...

编程日记 2024/8/13 4:58:07

[240812] X-CMD 发布 v0.4.5:更新 gtb、cd、chat、hashdir 模块功能

目录 &#x1f4c3;Changelog✨ gtb✨ cd✨ chat✨ hashdir &#x1f4c3;Changelog ✨ gtb 调整了 fzf 预览窗口中书籍文本的显示效果&#xff0c;通过识别文本中的特殊字符、日期、章节标题等信息&#xff0c;为其赋予不同的颜色。 ✨ cd cd 模块新增功能&#xff1a;在找…...

编程日记 2024/8/13 4:57:06

Flutter中的异步编程

目录 前言 1. Future 和 async/await 1.Future 1.什么是Future? 2.Flutter的三种状态 1.未完成&#xff08;Uncompleted&#xff09; 1.定义 2.处理未完成的Future 2.已完成(Completed with a value) 1.概念 2.处理已完成的Future 3.使用async/await 4.Fu…...

编程日记 2024/8/13 4:56:05

vue3 路由带传参跳转；刷新后消失。一次性参数使用。

解决vue3 怎么做到路由跳转传参刷新后消失 解决路由跳转传参去除问题 想要跳转后根据参数显示对应的tab&#xff0c;但url传参刷新会持续保留无法重置。 router.replace替换又会导致显示内容为router.replace后的&#xff0c;传参目的丢失。 业务逻辑&#xff1a; 完成对应操作…...

编程日记 2024/8/13 4:55:04

Unity新输入系统结构概览

本文仅作笔记学习和分享&#xff0c;不用做任何商业用途 本文包括但不限于unity官方手册&#xff0c;unity唐老狮等教程知识&#xff0c;如有不足还请斧正 在学习新输入系统之前&#xff0c;我们需要对其构成有个印象 1.输入动作&#xff08;Inputaction&#xff09; 是定义输…...

编程日记 2024/8/13 4:54:03

18104 练习使用多case解题

### 伪代码 1. 读取第1批测试数据的CASE数量。 2. 处理第1批测试数据&#xff0c;计算每个CASE的最小公倍数并输出。 3. 输出“group 1 done”。 4. 处理第2批测试数据&#xff0c;直到遇到两个0&#xff0c;计算每个CASE的最小公倍数并输出。 5. 输出“group 2 done”。 6. 处…...

编程日记 2024/8/13 4:53:02

【AI人工智能】文心智能体 - 你的专属车牌设计师

引言 自AI盛行以来&#xff0c;不断有各种各样的人工智能产品崭露头角。我们逐步跟着不断产生的人工智能来使自己的工作和生活变得更加智能化&#xff01;那么我们是否能够创造一款专属于自己的人工智能产品呢&#xff1f; 文心智能体平台就给我们提供了这样的机会&#xff0c…...

编程日记 2024/8/13 4:48:57

Linux-服务器硬件及RAID配置实验

系列文章目录 提示&#xff1a;仅用于个人学习&#xff0c;进行查漏补缺使用。 1.Linux介绍、目录结构、文件基本属性、Shell 2.Linux常用命令 3.Linux文件管理 4.Linux 命令安装(rpm、install) 5.Linux账号管理 6.Linux文件/目录权限管理 7.Linux磁盘管理/文件系统 8.Linu…...

编程日记 2024/8/13 4:47:55

白屏检测系统的设计与实现

目录 一、 什么是白屏问题&#xff1f;二、 问题分析与拆解2.1 人工判定一个白屏问题的逻辑2.2 自动化判定一个白屏问题的算法思想 三、 白屏检测算法3.1 图像灰度化3.2 图像二值化3.3 计算&#xff08;判定为白屏&#xff09;置信度 四、 白屏检测系统的设计与实现4.1 UI自动化…...

编程日记 2024/8/13 4:46:54

Real-Time Open-Vocabulary Object Detection：使用Ultralytics框架进行YOLO-World目标检测

Real-Time Open-Vocabulary Object Detection&#xff1a;使用Ultralytics框架进行YOLO-World目标检测 前言相关介绍前提条件实验环境安装环境项目地址LinuxWindows 使用Ultralytics框架进行YOLO-World目标检测进行训练进行预测进行验证 扩展目标跟踪设置提示 参考文献 前言 由…...

编程日记 2024/8/13 4:45:53

AX-MES生产制造管理系统-总览

前言说起 MES 就不得不说 ERP&#xff0c;但是 ERP 大家基本上都知道&#xff0c;MES 就不一定了&#xff0c;常见的 ERP 系统包括 SAP、金蝶、用友等&#xff0c;ERP的流程相对来说也比较统一&#xff1b;MES就不同了&#xff0c;基本上熟悉业务流程的软件公司都可以开发并实施…...

编程新知 2026/5/26 4:48:24

别再死记硬背了！用Multisim仿真+图解，5分钟搞懂三极管共射放大电路工作原理

用Multisim仿真图解5分钟掌握三极管共射放大电路三极管共射放大电路是电子技术中最基础也最关键的电路之一&#xff0c;但传统教材中复杂的公式推导和静态图解往往让初学者望而生畏。本文将带你用Multisim仿真软件&#xff0c;通过可视化的方式直观理解电路工作原理&#xff0c…...

编程新知 2026/5/26 3:32:09

【CP-05】RTE运行时环境 - SWC的操作系统接口

CP-05_RTE运行时环境【CP-05】RTE运行时环境 - SWC的“操作系统接口”前言在AUTOSAR架构中&#xff0c;RTE&#xff08;Runtime Environment&#xff0c;运行时环境&#xff09;是一个常被提及却难以理解的概念。它像是应用层软件组件&#xff08;SW-C&#xff09;与底层基础软…...

编程新知 2026/5/26 2:29:35

CANN-昇腾NPU-RAG推理-检索增强生成怎么部署

RAG&#xff08;Retrieval-Augmented Generation&#xff09;是 LLM 知识库的组合&#xff1a;先检索相关文档&#xff0c;再让 LLM 基于文档回答。昇腾NPU 上部署 RAG 需要两个组件&#xff1a;Embedding 模型&#xff08;做向量检索&#xff09;和 LLM&#xff08;做生成&am…...

编程新知 2026/5/26 2:23:30

Python PIL 画矩形框

基础代码 from PIL import Image, ImageDraw# 打开图片 img Image.open(your_image.jpg)# 创建绘图对象 draw ImageDraw.Draw(img)# 矩形坐标 (x1, y1, x2, y2) coords (23, 21, 69, 76)# 画矩形框&#xff08;红色&#xff0c;线宽2&#xff09; draw.rectangle(coords, ou…...

编程新知 2026/5/26 0:44:32

Burp Suite拦截与替换机制深度解析：从协议层到规则链

1. 这不是“点开就能用”的功能&#xff0c;而是你和目标系统之间的一道可编程闸门很多人第一次在Burp Suite里点开Proxy → Intercept&#xff0c;看到HTTP请求被拦下来&#xff0c;兴奋地改个User-Agent、删个Cookie就点Forward&#xff0c;以为自己已经掌握了“拦截与替换”…...

编程新知 2026/5/25 23:12:51

告别元素变动导致的报错：探索自动化测试脚本的 AI“自愈”能力

前言：一个所有测试人都经历过的噩梦 周三晚上十一点，CI/CD流水线再次亮起红灯。 你打开日志，满屏的NoSuchElementException扑面而来。仔细一看——前端团队在昨天的版本中重构了登录页面的DOM结构，原本的#login-btn变成了#signin-button-v2，30个测试用例因此全军覆没。 …...

编程新知 2026/5/25 23:08:50

学习日志（三）【php语法学习，iscc校赛wp】

1. 任务 1.1.1.1.1.1. 知识部分 rce看【之前的笔记&#xff1f;】php的知识点学习继续jwt token好像是比赛的题目考察内容&#xff0c;我看看php伪协议 1.1.1.1.1.2. 题目 参加iscc比赛【五一】rce题目 1.1.1.1.1.3. 环境配置 把vscode搞好&#xff0c;上学期没有把Php配…...

编程新知 2026/5/25 19:55:28

机器学习的最佳实践：这7个原则让你的模型更稳定

对于软件测试从业者而言&#xff0c;机器学习技术正在快速融入测试流程&#xff1a;从自动化测试用例生成、缺陷预测到测试环境异常检测&#xff0c;机器学习模型的稳定性直接决定了测试结果的可靠性——如果模型在测试环境波动、输入数据变化时性能骤降&#xff0c;不仅无法提…...

编程新知 2026/5/25 17:52:57

从科研图表到商业报表：如何用Matplotlib的legend()提升你的图表专业度？

从科研图表到商业报表&#xff1a;如何用Matplotlib的legend()提升你的图表专业度&#xff1f; 在数据驱动的决策时代&#xff0c;图表不仅是科研论文中的证据载体&#xff0c;更是商业汇报中的说服工具。我曾见证一位生物统计学家将同一组临床试验数据呈现给三种不同受众&…...

编程新知 2026/5/25 17:48:26