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

模板字符串

    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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 三,字符串扩展 3.1 Unicode表示法 ES6 做出了改进,只要将码点放入大括号,就能正确解读该字符。有了这...
    eastbaby阅读 1,561评论 0 8
  • 一、ES6简介 ​ 历时将近6年的时间来制定的新 ECMAScript 标准 ECMAScript 6(亦称 ...
    一岁一枯荣_阅读 6,108评论 8 25
  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,268评论 0 4
  • 采访人:索菲(索菲老师)日语系出身,国际教育机构对外汉语培训师.沪江网校日语讲师.曾在爱尔兰做过志愿者。自由行欧洲...
    诗一闲修阅读 780评论 4 5
  • “加油!加油!”操场上传来一阵阵排山倒海的欢呼声,一潮高过一潮,我们学校正在举行一年一度的小学生运动会。 随着同学...
    忘流年_2da7阅读 227评论 0 0