美文网首页angular从入门到一脸懵逼
Lesson3:ES6简易入门(模板字符串,箭头函数)

Lesson3:ES6简易入门(模板字符串,箭头函数)

作者: 天魂_TH | 来源:发表于2017-09-17 21:54 被阅读9次

    模板字符串

        let name = "Neo";
        let occupation = "programmer";
    
        //不使用模板字符串拼接
        let str = "He is "+ name +",he is a "+ occupation;
    
        //使用模板字符串拼接
        let str = `He is ${name},he is a ${occupation}`;
    

    模板字符串不再需要反复使用双引号(或者单引号)了拼接字符串,而是改用反引号标识符( ` 键盘右上角~键),插入变量的时候也不需要再使用加号(+),而是把变量放入${ }即可。

    使用模板字符串的注意点:

    1、可以定义多行字符串

    let str = `write once ,
               run anywhere`;
    

    ⚠️ 直接换行即可,但是要注意的是:所有的空格和缩进都会被保留。

    2、${ }中可以放任意的javascript表达式

    ${ }中可以是运算表达式

        var a = 1;
        var b = 2;
        var str = `the result is ${a+b}`;
        //进行加法运算 结果:the result is 3
    

    ${ }中可以是对象的属性

        var obj = {"a":1,"b":2};
        var str = `the result is ${obj.a+obj.b}`;
        //对象obj的属性
        //结果:the result is 3.
    

    ${ }中可以是函数的调用

        function fn() {
            return 3;
        }
        var str = `the result is ${ fn() }`;
        //函数fn的调用,结果:the result is 3
    

    箭头函数

    ES6给我们介绍一种全新的定义函数的方式,就是用箭头符号(=>),故得名为箭头函数。

        //传统写法
        var sum = function(value) {
           return  value;
        };
        
        //箭头函数写法
        var sum = value => value;
    

    ⚠️ value=>value; 第一个value代表传进去的参数,箭头=>后面的value表示函数体;

        //箭头函数写法
        var sum = (a,b) => {return a+b}
        sum(1,2); //结果:3
    

    注意上面的参数和函数体部分,如果参数超过1个的话,需要用小括号()括起来,函数体语句超过1条的时候,需要用大括号{ }括起来。

    💡 箭头函数中的this指向的是定义时的this,而不是执行时的this

    相关文章

      网友评论

        本文标题:Lesson3:ES6简易入门(模板字符串,箭头函数)

        本文链接:https://www.haomeiwen.com/subject/mcsmsxtx.html