前端模板字符串的使用

目录

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,一经查实,立即删除!

相关文章

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…

在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…

【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】…

三、内存分配

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;…

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

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

Redis实战之-分布式锁-redission

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

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

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

SpringMVC第一天

简介 SpringMVC技术与Servlet技术功能等同&#xff0c;均属于web层开发技术 SpringMVC是一种基于java实现的MVC模型的轻量级Web框架 优点 使用简单,开发便捷(相比于Servlet) 灵活性强 入门案例 第一步、导入SpringMVC与Servlet坐标 <?xml version"1.0" encod…

(Bean工厂的后处理器入门)学习Spring的第七天

一 . Bean工厂的后处理器入门 : 直接上图 BeanDefinitionRegistyPostProcessor 为 BeanFactoryProcessor的子接口 , 前者先执行(图里只有Bean工厂的后处理器第一个类型) 如下图 : 这两个接口可改变两个Map(BeanDefinitionMap , singletonObject)里的信息 (黑马只讲了BeanFact…

打造更智能的应用 - 机器学习和Andorid

打造更智能的应用 - 机器学习和Andorid 一、关于机器学习和Andorid二、使用 Gemini 让您的 Android 应用如虎添翼2.1 Gemini API2.2 Android AICore 三、现成可用的还是自定义的机器学习3.1 机器学习套件 SDK 的常见用户流3.2 高性能自定义机器学习 四、机器学习套件 SDK&#…

透明拼接屏生产商:如何选择合格供应商

随着透明拼接屏市场的不断扩大&#xff0c;越来越多的生产商加入其中。对于需求方而言&#xff0c;选择一家合格的生产商至关重要。本文将围绕如何选择透明拼接屏生产商展开讨论&#xff0c;同时结合对尼伽OLED显示屏的了解&#xff0c;为您推荐这一领域的优质供应商。 一、透明…

鸿蒙开发笔记(二十二): 页面路由(router),组件导航 Navigation, Tabs

1. 页面路由 router 页面路由指在应用程序中实现不同页面之间的跳转和数据传递。HarmonyOS提供了Router模块&#xff0c;通过不同的url地址&#xff0c;可以方便地进行页面路由&#xff0c;轻松地访问不同的页面。本文将从页面跳转、页面返回和页面返回前增加一个询问框几个方…

和平精英如何针对伏地魔

我的办法是开启颜色反转 一般安卓手机有这种功能 比如我是橘子系统4.0 橘子系统永远得神。 开启颜色反转 进入设置–快捷与辅助/更多设置–无障碍/辅助功能–颜色反转–打开开关即可。 注&#xff1a;颜色反转即增强显示内容的对比度&#xff0c;使对低对比度内容识别力差的人…

基于Pytorch做深度学习,但是代码水平很低,应该如何学习呢?

PyTorch是一个Python程序库&#xff0c;有助于构建深度学习项目。它强调灵活性&#xff0c;并允许用深度学习领域惯用的Python来表示深度学习模型。它的易用性使得它在研究社区中有了早期的使用者&#xff0c;并且在第1次发布之后的几年里&#xff0c;它已经成为应用程序中使用…

机器学习实验报告——EM算法

目录 一、算法介绍 1.1算法背景 1.2算法引入 1.3算法假设 1.4算法原理 1.5算法步骤 二、算法公式推导 2.1数学基础 2.2EM算法推导 三、算法实现 3.1关于EM聚类 3.2EM工具包的使用 3.3 实例测试 四、算法讨论 4.1EM算法的优缺点 4.2EM算法的应用 4.3对于EM算法…

信息安全概述

信息安全&#xff1a;防止任何对数据进行未授权访问的措施&#xff0c;或者防止造成信息有意无意泄漏、破坏、丢失等问题的发生&#xff0c;让数据处于远离危险、免于威胁的状态或特性。 网络安全&#xff1a;计算机网络环境下的信息安全。 信息安全现状及挑战 数字化时代威…