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

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

news 2026/2/9 23:18:32

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

UE5 学习系列（二）用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇&#xff0c;在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下&#xff1a; 【Note】&#xff1a;如果你已经完成安装等操作&#xff0c;可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作&#xff0c;重…...

编程新知 2026/2/8 4:37:41

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

编程新知 2026/2/8 4:37:37

AI Agent与Agentic AI：原理、应用、挑战与未来展望

文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例&#xff1a;使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例&#xff1a;使用OpenAI GPT-3进…...

编程新知 2026/1/23 7:04:53

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

编程新知 2026/1/31 23:44:39

C++八股 —— 单例模式

文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全&#xff08;Thread Safety&#xff09; 线程安全是指在多线程环境下&#xff0c;某个函数、类或代码片段能够被多个线程同时调用时&#xff0c;仍能保证数据的一致性和逻辑的正确性&#xf…...

编程新知 2025/12/2 3:35:50

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系&#xff0c;以下是深入解析&#xff1a; 门铃FIFO溢出的本质 在RapidIO系统中&#xff0c;门铃消息FIFO是硬件控制器内部的缓冲区&#xff0c;用于临时存储接收到的门铃消息&#xff08;Doorbell Message&#xff09;。…...

编程新知 2026/1/7 1:29:19

深度学习习题2

1.如果增加神经网络的宽度&#xff0c;精确度会增加到一个特定阈值后&#xff0c;便开始降低。造成这一现象的可能原因是什么&#xff1f; A、即使增加卷积核的数量&#xff0c;只有少部分的核会被用作预测 B、当卷积核数量增加时&#xff0c;神经网络的预测能力会降低 C、当卷…...

编程新知 2026/1/26 5:53:30

华硕a豆14 Air香氛版，美学与科技的馨香融合

在快节奏的现代生活中&#xff0c;我们渴望一个能激发创想、愉悦感官的工作与生活伙伴&#xff0c;它不仅是冰冷的科技工具&#xff0c;更能触动我们内心深处的细腻情感。正是在这样的期许下&#xff0c;华硕a豆14 Air香氛版翩然而至&#xff0c;它以一种前所未有的方式&#x…...

编程新知 2026/1/29 14:27:00

推荐 github 项目:GeminiImageApp(图片生成方向，可以做一定的素材)

推荐 github 项目:GeminiImageApp(图片生成方向&#xff0c;可以做一定的素材) 这个项目能干嘛? 使用 gemini 2.0 的 api 和 google 其他的 api 来做衍生处理 简化和优化了文生图和图生图的行为(我的最主要) 并且有一些目标检测和切割(我用不到) 视频和 imagefx 因为没 a…...

编程新知 2026/1/25 10:41:07

LabVIEW双光子成像系统技术

双光子成像技术的核心特性 双光子成像通过双低能量光子协同激发机制&#xff0c;展现出显著的技术优势&#xff1a; 深层组织穿透能力&#xff1a;适用于活体组织深度成像 高分辨率观测性能&#xff1a;满足微观结构的精细研究需求 低光毒性特点&#xff1a;减少对样本的损伤…...

编程新知 2026/1/31 13:04:44