使用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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • mavlink协议原理_mavlink协议长度

    mavlink协议原理_mavlink协议长度参考https://cloud.tencent.com/developer/news/48344https://www.cnblogs.com/lovechen/p/5801679.htmlhtt

    2022年8月5日
    6
  • 10款滑动门代码_jquery 滑动门_js滑动门_tab滑动门_jquery 选项卡_js选项卡_tab选项卡效果(三)

    10款滑动门代码_jquery 滑动门_js滑动门_tab滑动门_jquery 选项卡_js选项卡_tab选项卡效果(三)jquerytab选项卡插件滑动选项卡淡隐淡现选项卡jquerytab选项卡插件轻量级tab选项卡插件支持鼠标滑过、点击、自动切换、数据回调等功能jquery选项卡插件jquerytab选项卡支持垂直选项卡滚动、水平选项卡滚动、自动选项卡切换等。jquerytab选项卡ajax选项卡静态选项卡鼠标点击选项卡鼠标滑过选项卡jquery图片延迟加载插件制作tab选项卡图片异步加载…

    2025年6月5日
    2
  • python常用模块大全_python3内置模块大全

    python常用模块大全_python3内置模块大全mathmath.ceil(a):用来返回≥a的最小整数math.floor(a):用来返回≤a的最大整数round(a[,b])如果没有参数b,只有a,round()作用是四舍五入如果

    2022年7月30日
    6
  • 指标权重确定方法之熵权法「建议收藏」

    指标权重确定方法之熵权法「建议收藏」本文转自李政毅博客http://blog.sina.com.cn/s/blog_710e9b550101aqnv.html一、熵权法介绍熵最先由申农引入信息论,目前已经在工程技术、社会经济等领域得到了非常广泛的应用。熵权法的基本思路是根据指标变异性的大小来确定客观权重。一般来说,若某个指标的信息熵越小,表明指标值得变异程度越大,提供的信息…

    2022年6月3日
    25
  • java 取当前时间年月日_Java获取当前时间年月日的方法[通俗易懂]

    java 取当前时间年月日_Java获取当前时间年月日的方法[通俗易懂]本文实例为大家分享了java获取当前时间年月日的具体代码,供大家参考,具体内容如下importjava.text.ParseException;importjava.text.SimpleDateFormat;importjava.util.Calendar;importjava.util.Date;publicclassDateTest{publicstaticvoidmai…

    2025年9月7日
    5
  • 怎么用vscode运行java_捷达vs9参数配置

    怎么用vscode运行java_捷达vs9参数配置首先,当然是先下载VSCode官方链接:https://code.visualstudio.comVSCode(VisualStudioCode)官网选择匹配自己的操作系统版本就好(Windows,macOS,Linux),敢说自己是「Codeediting.Redefined.」,看得出来VSCode的底气。VSCode三大特点:免费、开源、跨平台下载运行后,会看到如下的Welcome「欢迎」界面。【VSCode】的颜值和【Github】夜间版都属一流

    2022年10月3日
    0

发表回复

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

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