前端模板字符串的使用

news2024/12/23 12:30:14

目录

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.coloradmin.cn/o/1405058.html

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

相关文章

基本的 Socket 模型

什么是Socket Socket 的中文名叫作插口&#xff0c;咋一看还挺迷惑的。事实上&#xff0c;双方要进行网络通信前&#xff0c;各自得创建一个 Socket&#xff0c;这相当于客户端和服务器都开了一个“口子”&#xff0c;双方读取和发送数据的时候&#xff0c;都通过这个“口子”…

机器学习 | 深入理解并掌握核心概念

在如今数字化时代的浪潮下&#xff0c;机器学习已经成为人工智能领域的璀璨明星。它像一面魔镜&#xff0c;赋予计算机系统学习和改进的能力&#xff0c;让机器能够从海量数据中提取规律、预测未来&#xff0c;甚至做出智能决策。本 专栏 将带您踏上机器学习的奇妙之旅&#xf…

什么是 Web3.0

什么是Web3.0 对于 Web3.0 的解释网上有很多&#xff0c;目前来说 Web3.0 是一个趋势&#xff0c;尚未有明确的定义。我们今天讨论下几个核心的点&#xff0c;就能很好的理解 Web3.0 要解决哪些问题 谁创造数据&#xff0c;这里的数据可以是一篇博客&#xff0c;一段视频&…

如何在容器内部进行抓包

//先获取POD 的容器ID号 //去pod容器所在节点进行解析id为pid号 //通过pid号进入这个容器的网络命名空间 docker inspect --format {{.State.Pid}} 05f38d2a61e29b5a9d24fc7a3906991ab92ecd58ff7e0eb4e339a4cc6b2c4fc4 //访问容器内部&#xff0c;Node01节点

微信小程序之WXSS模板样式、页面配置(.json)和网络数据请求

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

Flutter 自定义AppBar实现滚动渐变

1、使用ListView实现上下滚动。 2、使用Stack&#xff1a;允许将其子部件放在彼此的顶部&#xff0c;第一个子部件将放置在底部。所以AppBar&#xff0c;写在ListView下面。 3、MediaQuery.removePadding&#xff1a;当使用ListView的时候发现&#xff0c;顶部有块默认的Padd…

【 CSS 】定位

不要因为小小的失败而放弃大大的梦想&#xff0c;每一次坚持都是通向成功的一步。- 马克吐温 1. 定位 1.1 为何使用定位 我们先来看一个效果&#xff0c;同时思考一下用标准流或浮动能否实现类似的效果&#xff1f; 场景1: 某个元素可以自由的在一个盒子内移动位置&#xff0c…

企业如何高效营销?CBTC储能展助力企业市场拓展,黄金展位告急!

不论一家公司的规模有多大&#xff0c;展会都为之提供了一个很好的拓展业务的机会。参展是一种高效的营销方式。主要表现在哪些方面呢&#xff1f; 1、低成本接触合作客户。公司要接触到合格的客户&#xff0c;参加展会是最有效的方式。展会调查研究表明&#xff0c;通过销售电…

Effective C++——绝不在构造和析构构成中使用虚函数

父类的构造函数中调用的虚函数不是“虚”的 class father { public:virtual void log() {cout << "father building." << endl;}father(){log();} };class son : public father { public:virtual void log() {cout << "son building." &…

【面试突击】性能优化面试实战

&#x1f308;&#x1f308;&#x1f308;&#x1f308;&#x1f308;&#x1f308;&#x1f308;&#x1f308; 欢迎关注公众号&#xff08;通过文章导读关注&#xff1a;【11来了】&#xff09;&#xff0c;及时收到 AI 前沿项目工具及新技术的推送&#xff01; 在我后台回复…

【博士每天一篇论文-综述】Deep Echo State Network (DeepESN)_ A Brief Survey

阅读时间&#xff1a;2023-11-22 1 介绍 年份&#xff1a;2017 作者&#xff1a;C. Gallicchio 比萨大学计算机科学系终身教授助理教授&#xff0c;A. Micheli&#xff0c;比萨大学计算机科学系 期刊&#xff1a; ArXiv 引用量&#xff1a;68 这是两个大牛的论文&#xff0c;…

仓储管理系统——软件工程报告(需求分析)②

需求分析 一、系统概况 仓库管理系统是一种基于互联网对实际仓库的管理平台&#xff0c;旨在提供一个方便、快捷、安全的存取货物和查询商品信息平台。该系统通过在线用户登录查询&#xff0c;可以线上操作线下具体出/入库操作、查询仓库商品信息、提高仓库运作效率&#xff…

年货节电视盒子哪个好?内行分享权威网络电视盒子排行榜

淘宝、京东等已经开始了年货节促销&#xff0c;很多消费者买电视盒子会选择在此时入手&#xff0c;我近来收到了很多关于电视盒子哪个好的咨询&#xff0c;考虑到大家在选购时会参考排行榜&#xff0c;我这次要分享的是网络电视盒子排行榜&#xff0c;目前业内公认最好的电视盒…

LeetCode.2788. 按分隔符拆分字符串

题目 题目链接 分析 题目的意思是给我们一个字符串数组和一个分隔符&#xff0c;让我们按照分隔符把字符串数组分割成新的字符串数组。 看到这个描述&#xff0c;这不就是直接就是利用 按照分隔符分割字符串的系统库函数split()&#xff0c;这个函数的意思就是 把一个字符串…

C++(14.5)——再谈拷贝构造与深浅拷贝

上篇文章中&#xff0c;通过模拟的方式完成了类对象中常用的函数。在本篇文章中&#xff0c;将通过一个例子来进一步说明拷贝构造与深浅拷贝。 目录 1.再谈深浅拷贝与拷贝构造&#xff1a; 2. 流插入与流提取&#xff1a; 2.1 流插入&#xff1a; 2.2 流提取&#xff1a; …

性能优化-OpenCL运行时API介绍

「发表于知乎专栏《移动端算法优化》」 本文首先给出 OpenCL 运行时 API 的整体编程流程图&#xff0c;然后针对每一步介绍使用的运行时 API&#xff0c;讲解 API 参数&#xff0c;并给出编程运行实例。总结运行时 API 使用的注意事项。最后展示基于 OpenCL 的图像转置代码。在…

matlab模型变量一般说明,标定和显示量,以及产生a2l文件,自动填充a2l地址,并使用标定工具ati进行标定(推荐重要)

注意我是用的是matlab2019b 1&#xff0c;输入标定量&#xff0c;使用constant&#xff0c;用cal函数包裹 2&#xff0c;输出显示量&#xff0c;在划线上标注&#xff0c;然后用display函数包裹&#xff0c; 第一步和第二步完成以后&#xff0c;生产标定量a2l 3&#xff0c;输入…

分类预测 | Matlab实现LSTM-Attention-Adaboost基于长短期记忆网络融合注意力机制的Adaboost数据分类预测/故障识别

分类预测 | Matlab实现LSTM-Attention-Adaboost基于长短期记忆网络融合注意力机制的Adaboost数据分类预测/故障识别 目录 分类预测 | Matlab实现LSTM-Attention-Adaboost基于长短期记忆网络融合注意力机制的Adaboost数据分类预测/故障识别分类效果基本描述程序设计参考资料 分类…

2024年【焊工(初级)】考试内容及焊工(初级)新版试题

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 焊工&#xff08;初级&#xff09;考试内容参考答案及焊工&#xff08;初级&#xff09;考试试题解析是安全生产模拟考试一点通题库老师及焊工&#xff08;初级&#xff09;操作证已考过的学员汇总&#xff0c;相对有…

Centos7 安装redis 详细步骤访问不了github和windows系统下载

windows系统下载 https://hellowindows.cn/ VMware虚拟机安装Windows Server 2016 VL https://blog.csdn.net/qq_37545849/article/details/134828341 VMware全屏时不显示上方命令栏的边缘 此时如果要返回&#xff0c;可以把鼠标移动至屏幕上方边缘短暂停留以呼出命令栏。或使…