ECMAScript6-2

1、模板字串、箭头函数

1.1、模板字串

• 传统js,输出模板

var str='<b>姓名:</b>'+
'<span>lxr</span>';
console.log(str)//输出：<b>姓名:</b><span>lxr</span>

• ES6模板字串　　

var str=`<b>姓名:</b>
<span>12</span>`
console.log(str)

//输出：<b>姓名:</b>

// <span>12</span>

• 模板字串是增强版的字符串，用反引号(`)标识，他可以当作普通字符串使用也可以用来定义多行字符串，或在内部写入变量

'hello
'+'world'
//普通字符串

`hello 
world`
//多行字符串

var name='lxr',age=12
console.log(`姓名：${name},年龄：${age}`)
//字符串中写入变量

• 模板字符串之中还能调用函数

function fn() {
  return "Hello World";
}

`foo ${fn()} bar`
// foo Hello World bar

如果大括号中的值不是字符串，将按照一般的规则转为字符串。比如，大括号中是一个对象，将默认调用对象的 toString 方法。

2、箭头函数   Arrow Function

• ES6允许使用箭头(=>)定义函数

var f=v=>v//等同于
var f=function(v){
　　return v
}

• 不需要参数或者多个参数，就用括号代表参数部分

var f=()=>5
//等同于
var f=function(){return 5}

var sum=(num1,num2)=>num1+num2
//等同于
var sum=function(num1,num2){
    return num1+num2
}

• 代码块部分多于一条语句，就用大括号括起来，并且用return返回

var sum=(num1,num2)=>{return num1+num2}

• 箭头函数返回对象时，必须需在对象外面加上括号

var getTempItem=id=>({id:id,name:'Temp'})　　
console.log(getTempItem(2))

• 箭头函数可以简化回调函数

[1,2,3].map(function(x){
    return x*x
})
//等同于
[1,2,3].map(x=>x*x)