ES6之强大的模板字符串

什么是模板字符串

• 模板字面量： 是允许嵌入表达式的字符串字面量。你可以使用多行字符串和字符串插值功能。它们在ES2015规范的先前版本中被称为“模板字符串”。

模板字符串的定义

• 语法：使用反引号``，然后括起来，${}里面存放的可以是普通的字符串，也可以是变量，也可以是表达式，函数等等！

简单的模板字符串

  let str = "aaaavvbb" //这是普通字符串
  let str1 = `${"我是战士"}`
  console.log(str1); //我是战士

模板字符串里面书写变量

  let a = "我狄仁杰贼6"
  let str1 = `${a}`
  console.log(str1); //我狄仁杰贼6

模板字符串里面书写表达式

  //需求：假如a小于b，给box盒子添加active类
  let box = document.querySelector(".box")
  let a = 10;
  let b = 20;
  box.className = `${a<b?"active":""}`

模板字符串里面调用函数

  //4：在模板字符串里面调用函数
  function fn() {
    console.log(1);
  }
  let str = `${fn()}` //调用函数fn，打印 1 

模板字符串借助map遍历数据

  //5:模板字符串使用map遍历数据
  //需求：使用模板字符串遍历数组，给ul中的li添加数据
  let ul = document.querySelector("ul");
  let arr = [1, 3, 5, 7]
  ul.innerHTML = arr.map((item, i) => {
    return `
    
${item}
  `
  }).join("")//join("")主要是为了去掉，

模板字符串里面嵌套模板字符串

• 需求：使用模板字符串遍历数组，在遍历数组中对象，把姓名和年龄渲染到li之中
• 需求2：在ul之中在插入再插入另一个ul标签,里面的li存放的info中的信息

 let ul = document.querySelector("ul");
  let arr = [{
    name: "pink",
    age: "17",
    info: {
      height: 170,
      weight: 120
    }
  }, {
    name: "lala",
    age: 20,
    info: {
      height: 160,
      weight: 100
    }
  }]

  ul.innerHTML = arr.map((item, i) => {
    return `
    

        ${item.name} ${item.age}
    
    
    

      ${arr.map((items,i) => {
        return`
          <li>他的身高为：${items.info.height}，他的体重为：${items.info.weight}
        `
      }).join("")
    }
    </ul>
  `
  }).join("")

模板字符串里面遍历对象的方式1

var box = document.querySelector(".box")
    var ul = document.querySelector("ul");
    var weather = {
      temperature: "27",
      humidity: "63",
      info: "阴",
      img: "02"
    }
    var arr0 = []
    for (var k in weather) {
      arr0.push(weather[k])
    }
    // console.log(arr0); //拿到数组后，在遍历里面的元素！
    var html = ""
    html = arr0.map(function (item, i) {
      return `
      <li>${item}</li>
    `
    }).join("")
    ul.innerHTML = html;

未完待续。。。