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)

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

android 源码编译android 12

目录 一、python安装 二、repo管理多个git a.第一步, 新建一个空白文件夹保存repo引导文件,并包含你的路径 b.下载启动器 c.将git-repo中的repo文件复制到 1 创建的.bin目录中 d.修改权限 e. 执行版本检查 三、初始化工程 a.执行创建文件夹命令,创建android10…

oracle-关闭审计功能

1.查看审计功能是否开启 su – oraclesqlplus “/as sysdba”SQL> show parameter audit_trail NAME TYPE VALUE audit_trail string DB 注:VALUE值为DB时,表明审计功能为开启的状态 2.关闭oracle的审计功能 SQL> alter system set audit_trailFALSE scopespfile; Sy…

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

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

Spring Data JPA 提供的默认查询方法

1.依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-jpa</artifactId> </dependency> 2.查询 &#xff08;1&#xff09;基础查询前缀&#xff1a; findBy、findFirstBy、f…

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

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

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

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

Qt图像处理-OpenCv中Mat与QImage互转

Qt图像处理时需要OpenCv中Mat与QImage互转,具体代码如下 创建EditPhoto,头文件,使用前需要配置好opencv #include <QObject> #include <QImage> #include <QDebug>#include<opencv2/core/core.hpp> #include<opencv2/highgui/highgui.hpp> …

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

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

Java学习系列(一)

一、概念 1.Java 是由 Sun Microsystems 公司于 1995 年 5 月推出的高级程序设计语言。 2.Java 可运行于多个平台&#xff0c;如 Windows, Mac OS 及其他多种 UNIX 版本的系统。 3.移动操作系统 Android 大部分的代码采用 Java 编程语言编程。 4.Java分为三个体系&#xff1…

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

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

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

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

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

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

Windows C++ VS2022 OpenVINO 实例分割 Demo

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

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

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

Linux 中的 waitqueue 机制详解

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