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

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>

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/399295.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

lvs、集群

1.集群和分布式 当多个用户当用户访问一个服务器时&#xff0c;服务器server1可能就会崩&#xff0c;假如这时候我们新加一个服务器server2来缓解server1的压力&#xff0c;那么就需要一个调度器lvs来分配&#xff0c;所以现在就是用户的访问就需要通过调度器之后到达服务器&a…

简述MYSQL聚簇索引、二级索引、索引下推

一丶聚簇索引 InnoDB的索引分为两种&#xff1a; 聚簇索引&#xff1a;一般创建表时的主键就会被mysql作为聚簇索引&#xff0c;如果没有主键则选择非空唯一索引作为聚簇索引&#xff0c;都没有则隐式创建一个索引作为聚簇索引&#xff1b;辅助索引&#xff1a;也就是非聚簇索…

KillWxapkg 自动化反编译微信小程序,小程序安全评估工具,发现小程序安全问题,自动解密,解包,可还原工程目录,支持修改Hook,小程序

纯Golang实现&#xff0c;一个用于自动化反编译微信小程序的工具&#xff0c;小程序安全利器&#xff0c;自动解密&#xff0c;解包&#xff0c;可还原工程目录&#xff0c;支持微信开发者工具运行 由于采用了UPX压缩的软件体积&#xff0c;工具运行时可能会出现错误报告&…

在等保测评中,如何平衡技术风险和非技术风险的评估?

在等保测评中平衡技术风险和非技术风险的评估&#xff0c;需要一个综合的方法来确保所有相关的风险都得到适当的考虑。以下是一些关键步骤&#xff1a; 1. 全面风险识别&#xff1a;首先识别所有可能影响组织的风险&#xff0c;包括技术风险&#xff08;如系统漏洞、恶意软件&…

企业大模型落地从0到0.1

现在人工智能里的“大明星”——大模型&#xff0c;正在悄悄改变各行各业。这就像给企业装上了一颗聪明的大脑&#xff0c;能帮助解决各种棘手问题&#xff0c;提升工作效率。今天&#xff0c;我们就来分析下企业如何一步一步让这个“大脑”在自家地盘里真正派上用场&#xff0…

九、OpenCVSharp 中的图像形态学操作

文章目录 简介一、腐蚀1. 腐蚀的原理和数学定义2. 结构元素的形状和大小选择3. 腐蚀操作的代码实现和效果展示二、膨胀1. 膨胀的概念和作用2. 与腐蚀的对比和组合使用(如开运算、闭运算)三、开运算1. 开运算的定义和用途(去除小的明亮区域)2. 开运算在去除噪声和分离物体方…

数据结构--树与二叉树

数据结构分类 集合 线性结构(一对一) 树形结构(一对多) 图结构(多对多) 数据结构三要素 1、逻辑结构 2、数据的运算 3、存储结构&#xff08;物理结构&#xff09; 树的概念 树的分类 满二叉树和完全二叉树 二叉排序树 平衡二叉树 二叉树分类总结 二叉树的存储结构 …

Element-UI自学实践

概述 Element-UI 是由饿了么前端团队推出的一款基于 Vue.js 2.0 的桌面端 UI 组件库。它为开发者提供了一套完整、易用、美观的组件解决方案&#xff0c;极大地提升了前端开发的效率和质量。本文为自学实践记录&#xff0c;详细内容见 &#x1f4da; ElementUI官网 1. 基础组…

Linux os下借助Qt+libvlc是实现多路拉取摄像头rtsp数据流并实时显示

前言 应客户方的一个实际项目需求&#xff0c;需要在Linux操作系统下拉取多路摄像头的RTSP数据流并实时显示。 该项目的硬件平台基于飞腾2000四核处理器与景嘉微显卡&#xff0c;搭载了Kylin V10操作系统。 当前景嘉微GPU最多支持同时连接16路摄像头&#xff0c;拉取1920x108…

在等保测评中,如何平衡资产识别的全面性和准确性,避免过度关注某些资产而忽视其他潜在风险?

在等保测评中平衡资产识别的全面性和准确性&#xff0c;避免过度关注某些资产而忽视其他潜在风险&#xff0c;可以通过以下策略实现&#xff1a; 1. 全面审计&#xff1a;确保进行一次全面的审计&#xff0c;包括所有类型的资产&#xff0c;避免遗漏任何关键组件。 2. 风险导…

上海亚商投顾:三大指数小幅调整,两市成交不足5000亿

上海亚商投顾前言&#xff1a;无惧大盘涨跌&#xff0c;解密龙虎榜资金&#xff0c;跟踪一线游资和机构资金动向&#xff0c;识别短期热点和强势个股。 一.市场情绪 大指数昨日窄幅震荡&#xff0c;临近尾盘小幅下挫。环保板块开盘大涨&#xff0c;永清环保、清研环境、中兰环…

OpenCV图像滤波(10)Laplacian函数的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 功能描述 计算图像的拉普拉斯值。 该函数通过使用 Sobel 运算符计算出的 x 和 y 的二阶导数之和来计算源图像的拉普拉斯值&#xff1a; dst Δ src ∂…

LeetCode刷题笔记第191题:位1的个数

LeetCode刷题笔记第191题&#xff1a;位1的个数 题目&#xff1a; 想法&#xff1a; 通过位运算判断二级制形式中有多少个1&#xff0c;代码及解释如下&#xff1a; class Solution:def hammingWeight(self, n: int) -> int:return sum(1 for i in range(32) if n & …

Latex或者word里面mathtype类型的数学公式如何变成mathematica里面的形式

详细步骤如下&#xff1a; 第一步&#xff1a;Latex里面的公式复制粘贴到word里面&#xff0c;转变成mathtype类型的数学公式&#xff08;若已经是word里面mathtype类型的数学公式&#xff0c;这一步可以省略&#xff09;&#xff0c;如下&#xff1a; 第二步&#xff1a;将ma…

数字孪生赋能智慧城市大脑智建设方案(可编辑65页PPT)

引言&#xff1a;随着科技的飞速发展&#xff0c;智慧城市的建设已成为全球城市发展的新趋势。数字孪生技术作为其中的关键技术之一&#xff0c;正逐步赋能智慧城市大脑的建设&#xff0c;推动城市治理从数字化向智能化、智慧化转型升级。本方案旨在简要介绍数字孪生赋能智慧城…

Mapreduce_csv_averageCSV文件计算平均值

csv文件求某个平均数据 查询每个部门的平均工资&#xff0c;最后输出 数据处理过程 employee_noheader.csv&#xff08;没做关于首行的处理&#xff0c;运行时请自行删除&#xff09; EmployeeID,EmployeeName,DepartmentID,Salary 1,ZhangSan,101,5000 2,LiSi,102,6000…

VisionPro二次开发学习笔记13-使用CogToolBlock进行图像交互

该程序演示了如何使用CogToolBlock进行图像交互. 从vpp文件中加载一个ToolBlock。 用户可以通过应用程序窗体上的数字增减控件修改ToolBlock输入端子的值。 用户还可以从coins.idb或采集FIFO中选择图像。 “运行一次”按钮执行以下操作&#xff1a; 获取下一个图像或读取下一…

Android Studio 连接手机进行调试

总所周知&#xff0c;Android Studio里的虚拟手机下载后又大又难用。不如直接连手机用。本篇文章主要内容为Android Studio怎么连接手机进行程序调试。 1. 在AndroidSDK中下载google USB Driver: 2. 连接手机&#xff1a; 进入电脑设备管理器界面。并点开便携设备&#xff0c…

Java生成图形验证码

1、加依赖 <dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.8.16</version></dependency> 2、写接口&#xff0c;这块不需要登录成功才能操作的&#xff0c;所以写controller就行了…

图论:欧拉路

欧拉路是什么 什么&#xff1f;你对这个名字感到很陌生&#xff1f;再看看是图论的内容&#xff0c;感觉是不是很难&#xff1f;其实一点也不难&#xff0c;这就是生活中的一笔画问题&#xff0c;也就是不重复的经过每一条边并可以访问所有的点&#xff0c;先看看这个图&#…