前端模板字符串的使用

目录

1.说明

2.示例

3.总结


1.说明

模板字符串是用反引号(`)分隔的字面量,允许多行字符串,带有嵌入表达式的字符串插值和一种带标签的模板的特殊结构。

是增强版的字符串,在进行字符串拼接时,可以拼接固定值,嵌入变量,嵌入方法等,可以进行换行。

2.示例

<!DOCTYPE html>
<html>
<head><title>文档标题</title>
<script type="text/javascript">
//拼接常量
var str1 = `1234569---471`
console.log(str1);
//嵌入变量
var name = "123"
var str2 = `${name}--123`
console.log(str2)
//支持换行
var str3 = `123-
345`
console.log(str3)
//嵌入方法
function getInfo(){
return '你好'
}
var str4 = `执行结果:${getInfo()}`
console.log(str4)
//嵌入表达式
var str5 = `计算结果:${1+1}`
console.log(str5)
//模板字符串可以嵌套
var flag = true
function getStu(){
return '姓名:小孙'
}
var str6 = `信息:${flag?`${getStu()}`:'信息不存在'}`
console.log(str6)
</script>
</head><body>
</body></html>

结果:

3.总结

前端进行字符串拼接时,模板字符串使用简单实用,更易于理解。常用于拼接html信息,比如展示一个表格的body,可以使用模板字符串进行内容拼接

模板字符串 - JavaScript | MDN

ES6: 模板字符串_es6模板字符串-CSDN博客

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

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

相关文章

如何理解伪标签中的置信度

伪标签中常常有置信度这一说法&#xff0c;通过置信度&#xff0c;我们可以筛选出质量高的伪标签&#xff08;直观来说是像素&#xff09;&#xff0c;那比如说预测结果为一个2256256的概率图&#xff0c;那针对一个像素的两个通道值&#xff0c;怎样才算质量高或者低呢&#x…

11 python快速上手

函数进阶 函数进阶1.参数的补充1.1 参数内存地址相关【面试题】1.2 函数的返回值是内存地址1.3 参数的默认值【面试题】1.4 动态参数 2. 函数和函数名2.1 函数做元素2.2 函数名赋值2.3 函数名做参数和返回值 3.返回值和print4. 作用域4.1 函数为作用域4.2 全局和局部4.3 global…

一种计数算法

前言 常见的一个问题: 给定一个整形数组, 统计其中有多少唯一的元素. 常见的思路有哪些呢? 元素去重并统计, 利用哈希表进行去重计数.数组排序后统计 以上空间复杂度均与元素数量关联, 如果允许损失精度, 是否可以使用较低的空间占用来统计呢? 利用布隆过滤器是一种的一…

SHELL编程-Linux自动化运维基础(变量与条件控制语法)

SHELL编程-Linux自动化运维基础 变量使用 定义与使用 r123localhost:~$ first_varaaa r123localhost:~$ echo $first_var aaa r123localhost:~$ second_var123 r123localhost:~$ echo $second_var 123 r123localhost:~$ third"bbb ccc" r123localhost:~$ echo $th…

在CentOS 7 中配置NFS服务器

目录 1、克隆两个虚拟机 2、安装 NFS 服务 3、NFS 服务使用 1、克隆两个虚拟机 nfs-servernfs-client&#xff08;修改ip地址&#xff09;[rootxnode1 ~]# cd /etc/sysconfig/network-scripts/[rootxnode1 network-scripts]# vi ifcfg-eno16777736 #修改内容如下 BOOTPROT…

【Oracle】ORA-32017和ORA-00384错误处理

文章目录 【Oracle】ORA-32017和ORA-00384错误处理问题描述问题原因和解决测试验证 【声明】文章仅供学习交流&#xff0c;观点代表个人&#xff0c;与任何公司无关。 编辑|SQL和数据库技术(ID:SQLplusDB) 收集Oracle数据库内存相关的信息 【Oracle】ORA-32017和ORA-00384错误…

Linux 常见性能指标 -- 磁盘

本系列记录操作系统常见性能指标&#xff0c;写这个主要是记录也是回顾&#xff0c;笔记很长&#xff0c;拆分了几个部分&#xff0c;本篇记录 磁盘 的性能指标 常见概念 响应时间 简单描述&#xff1a;I/O 请求从发出到收到响应的间隔时间 是衡量磁盘性能的关键指标&#x…

【QT+QGIS跨平台编译】之二:【zlib+Qt跨平台编译】(一套代码、一套框架,跨平台编译)

文章目录 一、zlib介绍二、文件下载三、文件分析四、pro文件五、编译实践 一、zlib介绍 zlib是一套通用的解压缩开源库&#xff0c;提供了内存&#xff08;in-memory&#xff09;压缩和解压函数。zlib是一套通用的解压缩开源库&#xff0c;提供了内存&#xff08;in-memory&am…

【小沐学GIS】基于C#绘制三维数字地球Earth(OpenGL)

&#x1f37a;三维数字地球系列相关文章如下&#x1f37a;&#xff1a;1【小沐学GIS】基于C绘制三维数字地球Earth&#xff08;OpenGL、glfw、glut&#xff09;第一期2【小沐学GIS】基于C绘制三维数字地球Earth&#xff08;OpenGL、glfw、glut&#xff09;第二期3【小沐学GIS】…

DQL基础查询

DQL基础查询 ● DQL&#xff08;Data Query Language&#xff09;数据查询语言查询是使用频率最高的一个操作&#xff0c;可以从一个表中查询数据&#xff0c;也可以从多个表中查询数据。 ● 基础查询语法&#xff1a; select 查询列表 from 表名; ● 特点&#xff1a; 查询…

三、内存分配

1. JVM 简化架构概览 1.1 运行时数据区&#xff08;即内存区域&#xff0c;又称 JVM 内存结构&#xff09; 如上面的 JVM 简化架构图所示&#xff0c;内存区域分为如下五个部分&#xff08;这五个部分统称为运行时数据区&#xff09;&#xff1a; PC 寄存器&#xff08;又称程…

Python-setup进阶打包命令

一、setup.py文件的书写 这个资料有很多&#xff0c;不多赘述&#xff0c;setup 函数常用的参数如下&#xff1a; 基础描述信息&#xff1a; name 包名称&#xff08;起一个响亮的名字&#xff09;version (-V) 包版本author 程序的作者author_email 程序的作者的邮箱地址mai…

Kafka-服务端-DelayedOperationPurgatory

DelayedOperationPurgatory是一个相对独立的组件&#xff0c;它的主要功能是管理延迟操作。 DelayedOperationPurgatory的底层依赖于Kafka提供的时间轮实现。 我们可以使用JDK本身提供的java.util.Timer或是DelayQueue轻松实现定时任务的功能&#xff0c;为什么Kafka还要专门…

图像处理之《用于统一源跟踪和深度伪造检测的深度可分离水印SepMark》论文精读

一、文章摘要 恶意的Deepfakes导致了一场关于区分真脸和伪造脸的激烈冲突。尽管已经制定了许多事后检测Deepfakes的对策&#xff0c;但毫无疑问&#xff0c;在可预见的操作之前&#xff0c;被动取证没有考虑对原始人脸采取任何预防措施。为了完成这个取证生态系统&#xff0c;…

python函数的使用

一、函数的定义 Python使用保留字def定义一个函数&#xff0c;形式如下&#xff1a; def <函数名>&#xff08;<参数列表>&#xff09;&#xff1a; <函数体> return <返回值> 函数的调用过程与C语言类似。 关于一中特殊的函数——匿名函数&…

月薪2W的软件测试工程师,到底是做什么的?

在生活中&#xff0c;我们常常会遇到以下几种窘迫时刻&#xff1a; 准备骑共享单车出行&#xff0c;却发现扫码开锁半天&#xff0c;车子都没有反应&#xff1b;手机导航打车&#xff0c;却发现地图定位偏差很大&#xff0c;司机总是跑错地方&#xff1b;买个水&#xff0c;却…

使用flask_limiter限制接口访问速率的方法

flask_limiter 目录 flask_limiter1.简介2.安装3.初始化4.装饰器用法5.limit用法 1.简介 这里简单介绍了一些使用flask_limiter的方法。具体详细可参考官方文档 https://flask-limiter.readthedocs.io/en/stable/ 2.安装 pip install flask_socketio3.初始化 from flask i…

Redis实战之-分布式锁-redission

一、分布式锁-redission功能介绍 基于setnx实现的分布式锁存在下面的问题&#xff1a; 重入问题&#xff1a;重入问题是指 获得锁的线程可以再次进入到相同的锁的代码块中&#xff0c;可重入锁的意义在于防止死锁&#xff0c;比如HashTable这样的代码中&#xff0c;他的方法都…

面试高频知识点:1集合 1.1HashSet集合的特点

HashSet&#xff08;哈希集合&#xff09;是Java集合框架中的一种实现Set接口的类&#xff0c;它具有以下特点&#xff1a; 无序性&#xff1a; HashSet不保证元素的顺序&#xff0c;即元素在集合中的存储顺序与它们的插入顺序无关。这是因为HashSet使用哈希表来存储元素&#…

​第14节-高质量简历写作求职通关-在线测试

在线测试主要包括性格测试、综合能力测试、技能测试三类 性格测试 性格测试主要用于考察个人与工岗位的匹配程度 考察内容包含性格、能力、动机、价值观等&#xff0c;考察形式一般为给出相应的工作场景&#xff0c;让你选择最喜欢或者最不喜欢的答案 技能考试 这类测试一般是针…