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

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

news 2026/2/10 7:29:41

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

质量体系的重要

质量体系是为确保产品、服务或过程质量满足规定要求&#xff0c;由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面&#xff1a; &#x1f3db;️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限&#xff0c;形成层级清晰的管理网络&#xf…...

编程新知 2025/10/24 9:13:44

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

编程新知 2025/11/11 6:28:42

.Net Framework 4/C# 关键字（非常用，持续更新...）

一、is 关键字 is 关键字用于检查对象是否于给定类型兼容，如果兼容将返回 true，如果不兼容则返回 false，在进行类型转换前，可以先使用 is 关键字判断对象是否与指定类型兼容，如果兼容才进行转换，这样的转换是安全的。 例如有：首先创建一个字符串对象，然后将字符串对象隐…...

编程新知 2025/9/25 18:41:38

IP如何挑？2025年海外专线IP如何购买？

你花了时间和预算买了IP&#xff0c;结果IP质量不佳&#xff0c;项目效率低下不说&#xff0c;还可能带来莫名的网络问题&#xff0c;是不是太闹心了&#xff1f;尤其是在面对海外专线IP时&#xff0c;到底怎么才能买到适合自己的呢&#xff1f;所以&#xff0c;挑IP绝对是个技…...

编程新知 2026/1/28 3:04:35

MacOS下Homebrew国内镜像加速指南（2025最新国内镜像加速）

macos brew国内镜像加速方法 brew install 加速formula.jws.json下载慢加速 &#x1f37a; 最新版brew安装慢到怀疑人生&#xff1f;别怕&#xff0c;教你轻松起飞&#xff01; 最近Homebrew更新至最新版&#xff0c;每次执行 brew 命令时都会自动从官方地址 https://formulae.…...

编程新知 2026/1/28 10:57:16

TSN交换机正在重构工业网络，PROFINET和EtherCAT会被取代吗？

在工业自动化持续演进的今天&#xff0c;通信网络的角色正变得愈发关键。 2025年6月6日&#xff0c;为期三天的华南国际工业博览会在深圳国际会展中心&#xff08;宝安&#xff09;圆满落幕。作为国内工业通信领域的技术型企业&#xff0c;光路科技&#xff08;Fiberroad&…...

编程新知 2026/1/26 5:57:43

qt 双缓冲案例对比

双缓冲 1.双缓冲原理 单缓冲&#xff1a;在paintEvent中直接绘制到屏幕&#xff0c;绘制过程被用户看到 双缓冲&#xff1a;先在redrawBuffer绘制到缓冲区&#xff0c;然后一次性显示完整结果 代码结构 单缓冲&#xff1a;所有绘制逻辑在paintEvent中 双缓冲&#xff1a;绘制…...

编程新知 2025/11/10 4:13:08

C++ 使用 ffmpeg 解码 rtsp 流并获取每帧的YUV数据

一、简介 FFmpeg 是一个‌开源的多媒体处理框架‌&#xff0c;非常适用于处理音视频的录制、转换、流化和播放。 二、代码 示例代码使用工作线程读取rtsp视频流&#xff0c;自动重连&#xff0c;支持手动退出&#xff0c;解码并将二进制文件保存下来。 注意&#xff1a; 代…...

编程新知 2025/11/17 1:30:28

基于微信小程序的作业管理系统源码数据库文档

作业管理系统 摘 要 随着社会的发展&#xff0c;社会的方方面面都在利用信息化时代的优势。互联网的优势和普及使得各种系统的开发成为必需。 本文以实际运用为开发背景&#xff0c;运用软件工程原理和开发方法&#xff0c;它主要是采用java语言技术和微信小程序来完成对系统的…...

编程新知 2026/2/4 5:41:52

JVM——对象模型：JVM对象的内部机制和存在方式是怎样的？

引入 在Java的编程宇宙中&#xff0c;“Everything is object”是最核心的哲学纲领。当我们写下new Book()这样简单的代码时&#xff0c;JVM正在幕后构建一个复杂而精妙的“数据实体”——对象。这个看似普通的对象&#xff0c;实则是JVM内存管理、类型系统和多态机制的基石。…...

编程新知 2026/2/4 4:03:10