5.ECMAScript6（ES6）- ES6的模版字符串

timg (1).jpg

ES6中允许使用反引号 `` 来创建字符串
可以嵌入变量
可以原生输出

1、拼接字符串

<script type="text/javascript">
        var num=Math.random()
        console.log('你想要的数字是'+num)  //ES5拼接字符串
        console.log(`你想要的数字是${num}`<br>) //ES6拼接字符串
    </script>
</body>

image.png

2、运算输出

（1）ES5输出

<script type="text/javascript">
    //es5
    var a=5
    var b=15
    var res=a+'+'+b+'='+(a+b)
    document.write(res+'<br>')
</script>

image.png

（2）ES6输出

<script type="text/javascript">
    //es6
    var a=15
    var b=30
    var res1=`${a}+${b}=${a+b}`
    document.write(res1)
</script>

image.png

（3）小案例 获取随机颜色 用ES6来获取变量

<div></div>
<div></div>
<div></div>
<div></div>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
       $(function () {
                var len=$('div').length;
                for(var i=0;i<len;i++){
                  //rgb()里面的三个值
                    var x=Math.random()*255;
                    var y=Math.random()*255;
                    var z=Math.random()*255;
                    $('div').eq(i).css('background-color',`rgb(${x},${y},${z})`);
                }
            })
     </script>
     <style type="text/css">
          div{
              display: inline-block;
              margin:50px 50px;
              width: 100px;
              height: 100px;
              border-radius: 50px;
              box-shadow: 0px 5px 20px #999;
          }
    </style>
</body>

image.png