使用es6模板字符串嵌入变量,并实现循环「建议收藏」

使用es6模板字符串嵌入变量,并实现循环「建议收藏」模板字符串支持嵌入变量,只需要将变量名写在${}之中。在模板字符串中,遍历数组,生成循环结构。letarr=[‘aaa’,’bbbb’,’c’,’dd’,’f’]lettemp=`<ul>${arr.map(item=>{return`<li>${item}</li>`}).join(”)}</ul>`console.log(temp);/*<ul><li>aa

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

模板字符串支持嵌入变量,只需要将变量名写在 ${} 之中。

在模板字符串中,遍历数组,生成循环结构。

let arr=['aaa','bbbb','c','dd','f']
let temp=`<ul> ${ 
     arr.map(item=>{ 
      return `<li>${ 
     item}</li>`
  }).join('')}
  </ul>`
  console.log(temp);
  
  /*<ul> <li>aaa</li><li>bbbb</li><li>c</li><li>dd</li><li>f</li> </ul>*/

不添加 join('') 时,在 li标签中间多了一个逗号,这是因为当大括号中的值不是字符串时,会将其转为字符串,比如一个数组 [1, 2, 3] 就会被转为 1,2,3,逗号就是这样产生的。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/171852.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Excel均方误差计算公式_随机误差项的方差估计量推导

    Excel均方误差计算公式_随机误差项的方差估计量推导在Excel表中,有时需要计算方差,然后根据此图绘制图表,目标值指示偏差程度,然后如何计算方差?方差的概念方差是每个数据与平均值之间差异的平方和的平均值.在概率论和数理统计中,方差(英语方差)用于衡量随机变量与其数学期望值(即均值)之间的偏差程度.均方误差的概念也称为标准偏差,它是每个数据与平均值的距离的平均值.它是平方的平方根和与平均值的偏差的平均值.标准偏差可以反映数据集的分散程度.如…

    2022年9月30日
    2
  • 系统临时文件的写和读:createTempFile和tempFileContent[通俗易懂]

    写java的时候,有时候查到的数据暂时用不到,我们可以把它写到一个临时文件中。今天写项目的时候发现了这个好方法。将context的内容写到临时文件@PostMapping("/temp")@ResponseBodyStringtemp(@RequestParamStringcontent)throwsIOException{FiletempFil…

    2022年4月11日
    48
  • 龙芯版UOS 自带浏览器无法使用flash在线播放视频

    龙芯版UOS 自带浏览器无法使用flash在线播放视频龙芯版UOS自带浏览器无法使用flash在线播放视频1.案例无法播放视频龙芯CPU使用MIPS指令集,用互联网的最新flash(一般情况下,是X86指令集flash),点击下载安装最新flash,会提示安装失败。2.解决办法a.打开命令界面(效果如下)b1.输入命令:sudoaptinstallfirefox-flashplayerb2.输入命令:输入密码3.完成后重新打开UOS自带浏览器,就可以轻松看视频。祝大家生活愉快!!!在此鸣谢:感谢龙芯大佬指导

    2022年6月6日
    38
  • web ide「建议收藏」

    web ide「建议收藏」webide在做项目中,遇到一个这样的场景,当我们把系统服务搭建好,给用户显示的时候,如果用命令行一步步的走,感觉会把他们弄晕,另外,交付系统,还得一步步的写操作流程,遇到一点问题,就还得补充进去,所以我就想,能不能搭建一个web-ide,用户直接把代码复制上去,点点点,就能完成系统的完整体验。当然,还有就是Web-ide对于移动办公、合作开发也有帮助,比如我想把我的代码给别人看,直接在他电…

    2022年10月18日
    2
  • pycharm学生怎么免费使用_pycharm学生延期

    pycharm学生怎么免费使用_pycharm学生延期首先登陆到官网:点击Buy-&gt; 选择 DISCOUNTEDANDCOMPLIMENTARYLICENSES,你会看到下面的内容freeforstudentandteachers,opensourceproject非盈利组织50%等,在这里,如果你是学生的话,点进去有两种获取激活码的方式,一种是有校内邮箱,一种是ISICcard,国际学生证。一般在…

    2022年8月28日
    11
  • ASP.NET MVC 5高级编程 (pdf书)「建议收藏」

    ASP.NET MVC 5高级编程 (pdf书)「建议收藏」链接:https://pan.baidu.com/s/1o7WaazYwihrgYstxak3olQ密码:vc78

    2022年7月21日
    21

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号