JS中的模板字符串(ES6中的模板字面量语法),什么是模板字符串、怎么使用,附代码演示

模板字符串

1、JavaScript 在 ES6 新增了模板字符串语法。模板字符串可以作为普通字符串使用,其作用是可以在字符串中换行(也就是支持多行字符串)以及将变量和表达式插入字符串

2、整个语法:使用反引号 ``,而不是单引号 ‘’ 或双引号 “” 来定义字符串。例子:

var a = `这是一个模板字符串`;
var b = `Hello World`;// 可以在模板字符串中同时使用单引号和双引号
var c = `hello "world",hei 'LiHua'`;// 支持多行字符串
var d = `string text line1
string text line2`

可以在其中插入变量,语法:${变量名}。例子:

var user = "yoyo";
var age = 20;
var x = `my name is ${user}, age is ${age}`
console.log(x)  //输出:my name is yoyo,age is 20

还可以插入表达式。例子:

var age = 20;
var x = `age is ${age+5}`
console.log(x)  //输出:age is 25
let x = 10;
let y = 5;
aa = `x - y 的值:${x-y}`
console.log(aa);  //输出: x - y 的值:5

还可以调用函数 或 函数表达式。例子:

function fun1(){return "hello world"
}
var x = `fun1 return:${fun1()}`;
console.log(x)  //输出:fun1 return:hello world===================================================================
const fun2 = function () {return "hello world"
}
var y = `fun1 return:${fun2()}`;
console.log(y)  //输出:fun1 return:hello world

综合案例演示

let [name, age] = ["tom", 32];
function fun() {return "helloworld";
}
let test2 = `${name}, age = ${age - 10}, say ${fun()}`;
console.log(test2);

结果:
在这里插入图片描述

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

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

相关文章

MindOpt工具是如何做到配套使用的?请看此篇

Mindopt 介绍 MindOpt是阿里巴巴达摩院决策职能实验室研发的专注于优化领域,提供智能优化解决方案的品牌。主要的目标是帮助客户通过先进的优化算法和技术,实现业务流程的最佳化,提升效率,降低成本,并最大化业务价值。…

【强化学习-读书笔记】表格型问题的 Model-Free 方法

参考 Reinforcement Learning, Second Edition An Introduction By Richard S. Sutton and Andrew G. Barto无模型方法 在前面的文章中,我们介绍的是有模型方法(Model-Based)。在强化学习中,"Model"可以理解为算法…

助力智能人群检测计数,基于YOLOv3开发构建通用场景下人群检测计数识别系统

在一些人流量比较大的场合,或者是一些特殊时刻、时段、节假日等特殊时期下,密切关注当前系统所承载的人流量是十分必要的,对于超出系统负荷容量的情况做到及时预警对于管理团队来说是保障人员安全的重要手段,本文的主要目的是想要…

YOLOv3-YOLOv8的一些总结

0 写在前面 这个文档主要总结YOLO系列的创新点,以YOLOv3为baseline。参考(抄)了不少博客,就自己看看吧。有些模型的trick不感兴趣就没写进来,核心的都写了。 YOLO系列的网络都由四个部分组成:Input、Backbone、Neck、Prediction…

Spring之容器:IOC(2)

学习的最大理由是想摆脱平庸,早一天就多一份人生的精彩;迟一天就多一天平庸的困扰。各位小伙伴,如果您: 想系统/深入学习某技术知识点… 一个人摸索学习很难坚持,想组团高效学习… 想写博客但无从下手,急需…

Nat. Methods | RoseTTAFoldNA准确预测蛋白质-核酸复合体

今天为大家介绍的是来自Frank DiMaio团队的一篇论文。蛋白质-核糖核酸(RNA)和蛋白质-脱氧核糖核酸(DNA)复合体在生物学中扮演着至关重要的角色。尽管近年来在蛋白质结构预测方面取得了显著进展,但预测没有同源已知复合…

海洋可视化大屏,Photoshop源文件

数据大屏通过实时的数据展示,可及时发现数据的变化和异常,以便及时采取措施。现分享海洋动力大数据监控、海洋数据监控系统、科技感海洋监控系统大屏模版的UI源文件,供UI设计师们快速获取PSD源文件完成工作 若需更多 大屏组件,请…

为什么MCU在ADC采样时IO口有毛刺?

大家在使用MCU内部ADC进行信号采样一个静态电压时,可能在IO口上看到这样的波形。这个时候大家一般会认识是信号源有问题,但仔细观察会发现这个毛刺的频率是和ADC触发频率一样的。 那么为什么MCU在ADC采样时IO口会出现毛刺呢?这个毛刺对结果有…

AI分布式训练:DDP (数据并行)技术详解与实战

编者按: 如今传统的单机单卡模式已经无法满足超大模型进行训练的要求,如何更好地、更轻松地利用多个 GPU 资源进行模型训练成为了人工智能领域的热门话题。 我们今天为大家带来的这篇文章详细介绍了一种名为 DDP(Distributed Data Parallel)的并行训练技…

基于Tkinter和OpenCV的目标检测程序源码+权重文件,实现摄像头和视频文件的实时目标检测采用YOLOv8模型进行目标检测

基于Tkinter和OpenCV的目标检测程序源码权重文件,实现摄像头和视频文件的实时目标检测采用YOLOv8模型进行目标检测 项目描述 本项目是一个基于Tkinter和OpenCV的目标检测应用程序,实现了摄像头和视频文件的实时目标检测。通过YOLOv8模型进行目标检测&a…

vue3 使用 element-plus 侧边菜单栏多开收起时 出现 迟滞、卡顿的问题

遇到问题 vue3 使用 element-plus 侧边菜单栏多开收起时 出现 迟滞、卡顿的问题 这里多开二级,当点击上面的回收时,出现了卡顿现象,找了很久才发现是因为引入了icon图标 具体原因不详!!!!坑啊 …

神经精神与遗传湘江论坛在湘召开,院士、专家共谋精神医学发展

12月15-17日,由中国遗传学会行为遗传学分会、湖南省遗传学会、湖南省神经科学学会和儿科罕见病教育部重点实验室共同主办的“神经精神与遗传湘江论坛”在湖南长沙召开,400余名参会代表齐聚一堂,为推动世界神经精神科学理念交融和前沿精神医学…

Windows C++ VS2022 OpenVINO 实例分割 Demo

目录 效果 模型信息 项目 代码 下载 其他 Windows C VS2022 OpenVINO 实例分割 Demo 效果 模型信息 Model Properties ------------------------- date:2023-09-07T17:11:46.798385 description:Ultralytics YOLOv8n-seg model trained on coco.…

为开发者设计的幻灯片演示工具Slidev

什么是 Slidev ? Slidev 是专为程序员打造的演示文稿工具。该项目是基于 Web 的幻灯片制作和演示工具,让用户可以使用 纯文本 Markdown 语法制作幻灯片,支持导出为 PDF 或 PNG 格式的文件,或以单页面展示幻灯片。对于大多数不擅长…

Linux 中的 waitqueue 机制详解

源码基于:Linux5.10 0. 前言 等待队列(waitqueue) 这个机制在Linux 内核中使用的频率很高,与进程调度机制紧密相关联,可以用来同步对系统资源的访问、异步事件通知、跨进程通信等。网上关于等待队列使用的优秀文章也很…

Nginx location+Nginx rewrite(重写)(新版)

Nginx locationNginx rewrite(重写) Nginx locationNginx rewrite(重写)一、location1、常用的Nginx 正则表达式2、location的类型3、location 的匹配规则4、location 优先级5、location 示例说明5.1只修改网页路径5.2修改nginx配置文件和网页路径5.3一般前缀5.4正则匹配5.5前缀…

百分比组件 - elementui改动

<el-slider v-model"value2" style"width: 87%;position: absolute;bottom: 9px;" disabled :show-tooltip"false"></el-slider>value2: 0,// 百分比条 ::v-deep .el-slider__runway.disabled .el-slider__bar {background-color: #…

linux应急响应基础和常用命令

linux应急响应 linux应急响应基础和常用命令基于linux系统本身进行应急响应。 系统基础信息获取 获取linux服务器基本信息 命令&#xff1a; uname -a内存cpu信息 cat /proc/cpuinfo cat /proc/meminfo lscpu free -m lsmod #查看载入的模块信息进程查看 动态进程查看 …

7.实现任务的rebalance

1.设计 1.1 背景 系统启动后&#xff0c;所有任务都在被执行&#xff0c;如果这时某个节点宕机&#xff0c;那它负责的任务就不能执行了&#xff0c;这对有稳定性要求的任务是不能接受的&#xff0c;所以系统要实现rebalance的功能。 1.2 设计 下面是Job分配与执行的业务点…

基于PyCharm实现串口GUI编程

工具效果如下如所示 下面简单介绍一下操作流程 1.打开PyCharm软件 2.创建一个工程 3.给该工程命名 4.在main.py里面黏贴如下的代码 # This is a sample Python script. # Press ShiftF10 to execute it or replace it with your code. # Press Double Shift to search everyw…