前言:只要坚持就会胜利--Coldfront-小白菜

既是总结也是一种分享

分享内容:ES6 字符串模板

案例1:var Musics=[{music:"六月的雨",singer:"胡歌",Album:"《六月的雨》"},{music:"认真",singer:"未知",Album:"《认真》"}]

window.onload=function(){

    let  ul1=document.querySelector("#ul1");

    for(let i=0;i<Musics.length;i++){

      let li1=document.createElement(" li ");

      li1.innerHTML=`<span>歌曲:${Music[i].music} 歌手:${Musics[i].singer}专辑:${Musics[i].Album}<span/>`//ES6字符串模板

      //li1.innerHTML="歌曲"+Musics[i].music+"歌手:"+Musics[i].music+"专辑"+Musics[i].Album; //传统的方式

      ul1.appendChild(li1);

    }

}

补充:一些内置的函数:startsWith(检测的东西);检测字符串需要检测的东西,如果检测有这个内容,返回true,否则返回false

前端小白-----ES6之字符串模板的更多相关文章

  1. 只为粗暴看一下ES6的字符串模板的性能

    网上查找"ES6 字符串模板 +性能"5分钟无果遂写了一个暴力测试. 测试对象: +=方式,字符串累加计算方式 +s1+s2...+sn方式,即传统连加拼接字符串方式 s.push ...

  2. ES6中字符串模板的使用

    反撇号(键盘上Tab键上面那个)基础知识 ES6引入了一种新型的字符串字面量语法,我们称之为模板字符串(template strings).除了使用反撇号字符代替普通字符串的引号 ‘ 或 ” 外,它们 ...

  3. ES6 学习 -- 字符串模板

    ES5及以前,动态操作dom结构时,要多个字符串和变量拼接,如果不换行处理,则需要写很长的代码,不利于阅读理解,如果进行换行写入,则需要一堆的"+"号来连接文本与变量,写起来非常麻 ...

  4. es6字符串模板总结

    我们平时用原生js插入标签或者用node.js写数据库语言时候,经常需要大量的字符串进行转义,很容易出错,有了es6的字符串模板,就再也不用担心会出错了 1.模板中的变量写在${}中,${}中的值可以 ...

  5. [js]es6语法: 字符串和数组的方法

    s的方法 根据index取value: 取首尾项,arr[0], arr[arr.length-1] 根据value取index(判断是否包含子字符串): s.indexOf 栗子: 'maotai' ...

  6. ES6中的模板字符串和新XSS Payload

    ES6中的模板字符串和新XSS Payload 众所周知,在XSS的实战对抗中,由于防守方经常会采用各种各样严格的过滤手段来过滤输入,所以我们使用的XSS Payload也会根据实际情况作出各种各样的 ...

  7. es6学习笔记--模板字符串

    这几天简单看了一下深入浅出es6这本书,感觉特实用,学习了一个新特性---模板字符串在项目开发中,拼接字符串是不可缺少的,动态创建dom元素以及js操作数据都要拼接字符串,在es6出来之前,我们都通常 ...

  8. es6 入坑笔记(一)---let,const,解构,字符串模板

    let  全面取代var 大概相似于C++的定义,一个变量必须得先定义后使用,没有预编译 注意let的作用域,一个{}就是一个作用域,上述规则须在一个作用于内 坑:for(let i =0;i < ...

  9. es6 中的 模板字符串

    Template literals are string literals allowing embedded expressions. You can use multi-line strings ...

随机推荐

  1. c++中的c_str()函数

    //c_str()是为了与C语言兼容,把c++中string类型的字符串返回首地址使用 #include <iostream>#include <string.h>using ...

  2. 将数组对象转换成DataSet

    public static DataSet ObjectArrayToDataSet(object[] objArr) { if (objArr.Length == 0) return null; D ...

  3. MYSQL中LIMIT用法_后台分页

    LIMIT是MySQL内置函数,其作用是用于限制查询结果的条数. 1)其语法格式如下: LIMIT[位置偏移量,]行数 其中,中括号里面的参数是可选参数,位置偏移量是指MySQL查询分析器要从哪一行开 ...

  4. swift 风骚的Guard语法

    http://blog.csdn.net/pjk1129/article/details/48627153#0-qzone-1-64255-d020d2d2a4e8d1a374a433f596ad14 ...

  5. vue-quill-editor 封装成组件;图片文件流上传;同一页面多个编辑器样式异常解决办法

    使用方法: 引入并注册组件,然后直接使用: @getcode是同步获取编辑器内容的::contentDefault是编辑器的默认内容: 注意:如果同一个页面多个编辑器,参数id不能相同,否则只有第一个 ...

  6. TCP之传输对象 客户端传输user对象到服务端 验证登录是否合法

    Server.java package com.sxt.tcp4; import java.io.IOException; import java.io.ObjectInputStream; impo ...

  7. 字符缓冲流 Day20

    package com.sxt.prac; /* * 缓冲流之字符缓冲流 defaultCharBufferSize = 8192; * 1.读入到程序 * 2.程序写到文件 * 3.采用循环边读边写 ...

  8. 关于Lattice Planner规划算法的若干问答

    Apollo问答 | 关于Lattice Planner规划算法的若干问答   上周,我们在Apollo开发者交流群内做了关于Lattice Planner的分享.这里,我们将社群分享里开发者提出的问 ...

  9. qt开发ROS gui 遇到:global.h:1087:4: error: #error &quot;You must build your code with position independent code if Qt was built with -reduce-relocations. &quot......

    具体错误如下: 一共出现38个错误 这个错误是在导入cmakelists.txt时产生的,其实不是工程本身的问题,是因为我卸载ros,再重新安装ros的过程中把qtcreator的部分包给删除了,导致 ...

  10. linux之docker

    简介 Docker是一个开源的应用容器引擎,基于go语言,遵循从Apache2.0协议开源 Docker可以让开发者打包他们的应用以及依赖包到一个轻量级,可移植的容器中,然后发布到任何流行的linux ...