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

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

news 2025/12/15 11:42:25

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

【kafka】Golang实现分布式Masscan任务调度系统

要求&#xff1a; 输出两个程序&#xff0c;一个命令行程序&#xff08;命令行参数用flag&#xff09;和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽&#xff0c;然后将消息推送到kafka里面。 服务端程序&#xff1a; 从kafka消费者接收…...

编程新知 2025/12/7 12:15:27

ES6从入门到精通：前言

ES6简介 ES6&#xff08;ECMAScript 2015&#xff09;是JavaScript语言的重大更新&#xff0c;引入了许多新特性&#xff0c;包括语法糖、新数据类型、模块化支持等&#xff0c;显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var&#xf…...

编程新知 2025/8/18 16:42:44

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

编程新知 2025/12/12 17:28:06

ElasticSearch搜索引擎之倒排索引及其底层算法

文章目录 一、搜索引擎1、什么是搜索引擎？2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长，文件大。2.其次，树深，IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...

编程新知 2025/12/10 14:05:33

Java求职者面试指南：Spring、Spring Boot、MyBatis框架与计算机基础问题解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、MyBatis框架与计算机基础问题解析 一、第一轮提问&#xff08;基础概念问题&#xff09; 1. 请解释Spring框架的核心容器是什么&#xff1f;它在Spring中起到什么作用&#xff1f; Spring框架的核心容器是IoC容器&#…...

编程新知 2025/10/4 21:24:40

ArcPy扩展模块的使用(3)

管理工程项目 arcpy.mp模块允许用户管理布局、地图、报表、文件夹连接、视图等工程项目。例如&#xff0c;可以更新、修复或替换图层数据源&#xff0c;修改图层的符号系统&#xff0c;甚至自动在线执行共享要托管在组织中的工程项。 以下代码展示了如何更新图层的数据源&…...

编程新知 2025/10/2 7:24:40

Windows 下端口占用排查与释放全攻略

Windows 下端口占用排查与释放全攻略​ 在开发和运维过程中&#xff0c;经常会遇到端口被占用的问题&#xff08;如 8080、3306 等常用端口&#xff09;。本文将详细介绍如何通过命令行和图形化界面快速定位并释放被占用的端口&#xff0c;帮助你高效解决此类问题。​ 一、准…...

编程新知 2025/10/5 19:22:12

Django RBAC项目后端实战 - 03 DRF权限控制实现

项目背景 在上一篇文章中&#xff0c;我们完成了JWT认证系统的集成。本篇文章将实现基于Redis的RBAC权限控制系统&#xff0c;为系统提供细粒度的权限控制。 开发目标 实现基于Redis的权限缓存机制开发DRF权限控制类实现权限管理API配置权限白名单 前置配置 在开始开发权限…...

编程新知 2025/10/1 4:57:11

多模态学习路线（2）——DL基础系列

目录 前言 一、归一化 1. Layer Normalization (LN) 2. Batch Normalization (BN) 3. Instance Normalization (IN) 4. Group Normalization (GN) 5. Root Mean Square Normalization&#xff08;RMSNorm&#xff09; 二、激活函数 1. Sigmoid激活函数&#xff08;二分类&…...

编程新知 2025/12/14 19:21:21

设计模式-3 行为型模式

一、观察者模式 1、定义 定义对象之间的一对多的依赖关系&#xff0c;这样当一个对象改变状态时&#xff0c;它的所有依赖项都会自动得到通知和更新。 描述复杂的流程控制 描述多个类或者对象之间怎样互相协作共同完成单个对象都无法单独度完成的任务 它涉及算法与对象间职责…...

编程新知 2025/12/7 3:39:15