位置: IT常识 - 正文

js模板字符串(Js模板字符串添加点击事件)

编辑:rootadmin
js模板字符串 js模板字符串模板字符串(模板字面量)在模板字符串中插入变量在模板字符串中插入表达式模板字符串中可以换行模板字符串中可以调用函数模板字符串支持嵌套使用模板字符串(模板字面量)

推荐整理分享js模板字符串(Js模板字符串添加点击事件),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:Js模板字符串拼接,js模板字符串添加换行,js模板字符串添加换行,js模板字符串的使用方法,js模板字符串的使用方法,js模板字符串添加换行,js模板字符串换行,Js模板字符串拼接,内容如对您有帮助,希望把文章链接给更多的朋友!

ES6 中引入了模板字符串,让我们省去了字符串拼接的烦恼。下面一起来看看它的特性。

在模板字符串中插入变量

以前,让字符串进行拼接的时候,是这样做的:(传统写法的字符串拼接)

var name = 'smyhvae';var age = '26';console.log('name:' + name + ',age:' + age); //传统写法

这种写法,比较繁琐,而且容易出错。

现在,有了 ES6 语法,字符串拼接可以这样写:

var name = 'qianguyihao';var age = '26';console.log('我是' + name + ',age:' + age); //传统写法console.log(`我是${name},age:${age}`); //ES6 写法。注意语法格式

注意,上方代码中,倒数第二行用的符号是单引号,最后一行用的符号是反引号(在 tab 键的上方)。

参考链接:

ES6 的 rest 参数和扩展运算符在模板字符串中插入表达式js模板字符串(Js模板字符串添加点击事件)

以前,在字符串中插入表达式的写法必须是这样的:

const a = 5;const b = 10;console.log('this is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.');

现在,通过模板字符串,我们可以使用一种更优雅的方式来表示:

const a = 5;const b = 10;// 下面这行代码,故意做了换行。console.log(`this is ${a + b} andnot ${2 * a + b}.`);

打印结果:

this is 15 andnot 20.模板字符串中可以换行

因为模板字符串支持换行,所以可以让代码写得非常美观。

代码举例:

const result = { name: 'qianguyihao', age: 28, sex: '男',};// 模板字符串支持换行const html = `<div><span>${result.name}</span><span>${result.age}</span><span>${result.sex}</span></div>`;console.log(html); // 打印结果也会换行

打印结果:

模板字符串中可以调用函数

模板字符串中可以调用函数。字符串中调用函数的位置,将会显示函数执行后的返回值。

举例:

function getName() { return 'qianguyihao';}console.log(`www.${getName()}.com`); // 打印结果:www.qianguyihao.com模板字符串支持嵌套使用const nameList = ['千古壹号', '许嵩', '解忧少帅'];function myTemplate() { // join('') 的意思是,把数组里的内容合并成一个字符串 return `<ul>${nameList.map((item) => `<li>${item}</li>`).join('')}</ul>`;}document.body.innerHTML = myTemplate();

效果如下:

本文链接地址:https://www.jiuchutong.com/zhishi/300104.html 转载请保留说明!

上一篇:CSS响应式布局(自适应布局)(css响应式布局插件)

下一篇:chatgpt 的真正用法,你真的会用吗(chatto)

  • 印花税应计什么科目?
  • 税务知识:价外费用包括哪些费用?
  • 员工交通费可以税前扣除吗
  • 税费退库怎么做凭证
  • 两家公司实际控制人为一个人
  • 企业所得税季报可以更正吗
  • 土地递减销售收益怎么算
  • 单位搬迁员工怎么办
  • 公车补贴计入什么科目
  • 折扣零售商是什么意思
  • 建筑图纸设计费包括晒图费吗
  • 厂房出租税收分类
  • 金税盘怎么开红字发票流程
  • 每个季度企业要缴纳什么税
  • 财务报表提供的信息仅对外部的投资者和债权人有用
  • 单位不发工资怎么解决要什么证据
  • 电子发票逾期未报税怎么办
  • 社保网上申报操作指南
  • 小规模季报都报哪些税种
  • Win10 20H2 KB5001391补丁包更新内容汇总
  • 电脑连接网线但没有网络
  • 水利建设基金是税还是费
  • 银行退回手续费的账务处理
  • 企业向股东发放现金股利
  • php字符串赋值
  • 提前退休的一次性补贴收入
  • php bcmul
  • PHP:pg_copy_to()的用法_PostgreSQL函数
  • replace.exe进程
  • 多台电脑共享打印机怎么设置
  • 个人住房5年后买卖如何交税?
  • 企业生产经营管理费用包括
  • 企业向个人借款是否合法
  • 金银首饰消费税计税依据
  • 前端开发从入门到放弃
  • 2023版最新最全React面试题
  • php限制
  • jsp页面构成
  • 纳税人识别号的英文缩写
  • 同城票据交换差额户金额从哪得来的
  • 公司开户限额一般多少
  • 代扣代缴个人所得税账务处理
  • php网站修改
  • dedecms建站操作
  • 外来原始凭证审核内容
  • 资产负债表中利息收入填在哪
  • 个体户取现金的几种方法
  • 工程结算收入如何确定
  • 旅行社开具的发票
  • 销售商品开票税目
  • 投资性房地产涉及其他综合收益
  • 售后维修费会计分录
  • 用友t3计提折旧了没有生成凭证
  • 小规模纳税人核定销售额
  • 抄报返写
  • mysql联合索引生效原则
  • MySQL数据库安装后通常默认的管理员用户名为
  • sql server 更改字段数据类型
  • 系统存储过程以什么开头
  • windows10取消fn功能键
  • Win10 Mobile 10549中Cortana电池消耗很大该怎么办?
  • 在unix系统中采用的页面置换
  • 系统更新win10
  • Linux操作系统软链接和硬链接的联系与区别
  • xp更改系统区域设置
  • macos dock
  • linux日志数据种类
  • cocos2dx入门
  • 安卓布局优化
  • Android游戏开发教程
  • 淘宝店铺首页导航栏css
  • 安卓手机画画触屏笔推荐
  • 用js设置颜色
  • AssetBundle.Unload(false)的作用
  • js实现滑动效果
  • android模拟器无法运行
  • 长春市国资局
  • 医保报销是按自然年计算吗
  • 现在买新车都需要交什么费用
  • 2019小规模纳税人标准
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设