模板字符串基本使用

news2025/1/21 12:01:22

模板字符串是ES6添加的一个新的字符串编写形式。

1.【模板字符串】之拼接

ES6之前,如果我们想要将字符串和一些动态的变量拼接到一起,是很麻烦的。

const name = "aaa"
const age = 18

console.log("my name is "+name+".I'm "+age+" years old")

需要添加多个+(加号),非常麻烦。

ES6允许我们使用字符串模板来嵌入JS的变量或者表达式来进行拼接。用``符号编写的字符串,称为模板字符串

在模板字符串中,我们可以通过反引号``内编写${变量}的形式将字符串和动态的变量拼接到一起。

const name = "aaa"
const age = 18

console.log(`my name is ${name}.I'm ${age} years old`) //my name is aaa.I'm 18 years old

这样编写不仅更方便,代码还有更好的可读性。

2.【模板字符串】之换行

使用单引号或者双引号编写字符串,如果内容过多,一行装不下的时候。需要将字符串分割成几个部分,使用+(加号)进行拼接。

const name = "aaa"
const age = 18
console.log("my name is"
+"name")

如果使用模板字符串就没有这样的烦恼。

const name = "aaa"
const age = 18
console.log(`my name is
name`)

不需要将字符串分割成几部分用+拼接。

3.【模板字符串】之标签模板字符串

如果我们在调用一个函数的时候不使用()来调用,并且传入其他的变量

function foo (...args){
        console.log(args)
}
const name = "aaa"
const age = 18

foo`Hello ${name} World ${age}`

foo`Hello ${name} World ${age}`也是可以调用函数的。 

函数可以获取到参数。

  • 第一个元素是数组,是被模块字符串拆分的字符串组合;
  • 后面的元素是一个个模块字符串传入的内容

 

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

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

相关文章

三个案例掌握this.$nextTick()方法的使用/Vue中的$nextTick()

this.$nextTick() 解释为在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的DOM. 也就是说,当dom元素发生改变,重新渲染dom树后,再执行vue.$nextTick()里面的内容。 其实用方法一般为 this.$n…

讲讲vue3下会造成响应式丢失的情况

题引: 在我们从vue2过渡到vue3的时候,对于数据响应式的变化其实是懵懵懂懂的。从以往直接在data函数里面定义变量到每一次都要使用ref/reactive时,是有些不适应的。但问题不大,毕竟在大前端时代中,如果不及时跟上时代…

TS中快速定义一个对象数组以及处理async await的异常

定义一个对象数组(即数组成员为对象,对象的属性为我们所约束) 方法一:接口字面量形式 export type Resource {_id: string,personID: {_id: stringage: stringidentifier: stringname: stringnation: stringgrade: stringscheme…

contentEditable属性

前言 我们最常用的输入文本内容便是input与textarea,但是有一个属性,可以让我们在很多标签中,如div,table,p,span,body等,可以像input输入框一样,实现文本编辑,这便是contentEditable属性 contentEditabl…

【vue2】近期bug收集与整理01

🥳博 主:初映CY的前说(前端领域) 🌞个人信条:想要变成得到,中间还有做到! 🤘本文核心:记录博主在vue2中遇到过的坑,本文是博主的学习使用总结 目录 1登陆token的问…

【学姐面试宝典】前端基础篇Ⅴ——JS深浅拷贝、箭头函数、事件监听等

前言 博主主页👉🏻蜡笔雏田学代码 专栏链接👉🏻【前端面试专栏】 今天继续学习前端面试题相关的知识! 感兴趣的小伙伴一起来看看吧~🤞 文章目录什么是事件监听事件委托以及冒泡原理介绍一下 promise&#x…

uniapp 小程序嵌套H5开发总结

项目需求是在uniapp小程序项目中嵌套H5页面,H5返回小程序需要传值给小程序进行通信。 好,百度一查确实可以实现 用的uniapp提供的web-view(https://uniapp.dcloud.io/component/web-view.html#web-view经验证实,做功能之前先看官网&#xff…

一天时间迅速准备前端面试|JavaScript——异步进阶

🌈本系列文章是博主精心整理的面试热点问题,吸收了大量的技术博客与面试文章,总结多年的面试经历,带你快速建立前端面试知识体系。抓住每一场面试的机会,知己知彼才能百战百胜! 上期回顾 JS基础–异步 本系…

【中秋快乐】如何用three.js实现我的太空遐想3D网页

目录 创作背景 功能分解 创建3d地球 创建3d月球 创建3d小火箭

解决element-ui动态加载级联选择器默认选中问题(Cascader)

前言 最近在开发任务中碰到需要在新增和修改时使用动态加载级联选择器,但是当在修改时设置默认选中项,出现了后端数据返回较慢,导致无法选中和级联框选中了但input框不显示的问题,网上找到的方法也不是很有效,还得使用…

Vue - v-for 循环渲染多个 “重复“ 子组件(仅 ref 不同,this.$refs.xx 使用时依然能准确找到子组件)将子组件 ref 设为动态,这样每个子组件都是 “独立“ 的!详细教程

前言 本教程更多版本:uni-app | 微信小程序 我们会通过给组件绑定 ref 值,然后通过 this.$refs.xx 来获取这个组件上的方法和变量。 如果 在 v-for 中循环渲染组件(绑定固定 ref),那么这个 ref 就会 “一摸一样”,导致根本无法找到(this.$refs.xx 谁?), 要解决这个问…

【前端】vue模板语法知识了解一下,是不是只知道用element-ui组件?

vue写在前面Vue模板语法文本原始HTML属性开源Vue模板和主题框架集合BootstrapVueelement-ui最后总结写在前面 上一篇总结了在实操过程中如果遇到了nodejs版本的问题,我们该如何去解决的,还有就是总结了vue2和vue3生命周期的区别,如果感兴趣的…

【JavaScript】JS实用案例分享:动态生成分页组件 | 通过按键实现移动控制

CSDN话题挑战赛第2期 参赛话题:学习笔记 🖥️ NodeJS专栏:Node.js从入门到精通 🖥️ 博主的前端之路(源创征文一等奖作品):前端之行,任重道远(来自大三学长的万字自述&am…

React 路由v6 - 超全详解

React router v6 路由 已经习惯了 v5 版本的路由 ,那么 v6 版本的路由 该怎么应用呢? 文章目录React router v6 路由Ⅰ、路由 v6 (两种形式)Ⅱ、 动态路由Ⅲ、路由重定向Ⅳ、路由跳转 (两种形式)Ⅴ、路由懒加载Ⅰ、路由 v6 (两种形式) 方案一 &#xff…

JS原生——编写简易计算器

一个非常适合新手练习的小案例!!! 使用JS的ES5语法HTMLCSS及企业级代码规范,方便后续良好的代码习惯养成!!! 先来看一下样式吧!!!(后附代码&…

组件通信的6种方式

什么是组件通信 vue组件中关系说明: 如上图所示, A与B、A与C、B与D、C与E组件之间是父子关系; B与C之间是兄弟关系;A与D、A与E之间是隔代关系; D与E是堂兄关系(非直系亲属) 针对以上关系我们归类为: 父…

前端跨域解决方案

文章目录1.同源政策2.跨域解决方案2.1 CORS普通跨域请求:只需服务端设置Access-Control-Allow-Origin即可携带cookie跨域请求:前后端都需设置2.2 JSONP原理缺点数据格式jsonp跨域实现2.3 postMessage跨域2.4 WebSocket属性:事件:使…

vue3+vite:本地代理,配置proxy

一、项目:uniappvue3vitets 二、配置文件在vite.config.ts proxy: {/snow: { // 匹配请求路径,localhost:3000/snowtarget: https://www.snow.com/, // 代理的目标地址changeOrigin: true, // 开发模式,默认的origin是真实的 origin:localh…

压缩gltf/glb模型踩坑与解决 three.js DRACOLoader

前言 使用前端three.js加载3d模型过程中,往往会出现模型大小过大导致前端加载时间过长,降低用户体验。 本文所记录的是笔者在使用gltf-pipeline压缩3d模型中踩坑DRACOLoader与解决的一个过程。 所采用的three库版本为 ^0.138.2 解决方案与介绍 通过g…

31.JavaScript数组进阶,一网打尽数组操作函数slice、filter、map、reduce、some、every、find、splice

文章目录数组进阶元素删除(对象方式)splice()删除一个元素删除多个元素截断数组元素替换元素插入返回值负索引slice()concat()forEach()indexOf、lastIndexOf、includesfind、findIndexfiltermapsortreversestr.split()和arr.join()reduce、reduceRightA…