ES6学习笔记-字符串、函数

字符串

es6对字符串新增了很多方便的功能，下面我们可以逐一来看一下。

1.字符串格式化
将表达式嵌入字符串中进行拼接。用${}来界定。

//ES5
var name = 'will'
console.log('hello' + name)

//es6
var name = 'will';
console.log(`hello ${name}`)

2.includes:判断是否包含然后直接返回布尔值

const str = 'will'
console.log(str.includes('y')) //true

3.repeat:获取字符串重复n次

const str = 'he'
console.log(str.repeat(3)) //'hehehe'

如果你带入小数，则按照Math.floor(num)来处理
也就是s.repeat(3.1)-s.repeat(3.9)都按照3来处理

4.startsWith 和 endsWith 判断是否以 给定文本 开始或者结束

const str = 'will is so cool!'
console.log(str.startsWith('will')) //true
console.log(str.endsWith('!')) //true

5.padStart 和 padEnd 填充字符串，应用场景：时秒分

 setInterval(() => {
    const now = new Date()
    const hours = now.getHours().toString()
    const minutes = now.getMinutes().toString()
    const seconds = now.getSeconds().toString()
    console.log(`${hours.padStart(2, 0)}:${minutes.padStart(2, 0)}:${seconds.padStart(2, 0)}`)
}, 1000)

常用的就这五个，如果有用到新的，我再添加。
然后来两道小测试题搞一下。

• 模拟一个模板字符串的实现。

    let address = '北京海淀区'
    let name = 'lala'
    let str = '${name}在${address}上班...'
    // 模拟一个方法 myTemplate(str) 最终输出 'lala在北京海淀区上班...'
    function myTemplate(str) {
        // try it
    }
    console.log(myTemplate(str)) // lala在北京海淀区上班...

• 实现标签化模板(自定义模板规则)。

  const name = 'cc'
    const gender = 'male'
    const hobby = 'basketball'
    // 实现tag最终输出 '姓名：**cc**，性别：**male**，爱好：**basketball**'
    function tag(strings) {
        // do it
    }
    const str = tag`姓名：${name}，性别：${gender}，爱好：${hobby}`
    console.log(str) // '姓名：**cc**，性别：**male**，爱好：**basketball**'
    

函数

ES5中，给函数定义参数默认值。

function action(num){
num = num || 200;
//当传入num时，num为传入的值
//当没传入参数时，num即有了默认值200
return num;
}

但es5一个特别坑爹的地方就是，当我们num传入0的时候，es5会自动把他识别为false，这和我们实际的需求相背而驰，这个时候我们ES6就粉墨登场了。

ES6为参数提供了默认值。在定义函数时便初始化了这个参数，以便在参数没有被传递时使用。

function action（num = 200）{
console.log(num)
}

action(0) //0
action() //200
action(300) //300

箭头函数

我记得前段时间在面试东科电力的时候，面试老哥问我，普通函数和箭头函数的区别，我几乎脱口而出说写法简单了，那老哥一下子就笑了。我至今也没明白他到底是为啥笑，人有魅力真是一件令人困扰的事情。

言归正传，我们来看一下箭头函数最直观的三个特点。

1.不需要function关键字来定义函数
2.省略return关键字
3.继承当前上下文的this关键字

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

说个小细节。

当你的函数有且仅有一个参数的时候，是可以省略掉括号的。当你函数有且仅有一个表达式的时候可以省略{}和 return；例如

var people = name => 'hello' + name

作为参考

var people = (name,age) => {
	const fullName = 'hello' + name;
	return fullName;
}

这个因为传入了两个参数 缺少()或者{}都会报错。

来，老铁，整道测试题吧。

 // 请使用ES6重构以下代码
    
    var calculate = function(x, y, z) {
      if (typeof x != 'number') { x = 0 }
      if (typeof y != 'number') { y = 6 }

      var dwt = x % y
      var result

      if (dwt == z) { result = true }
      if (dwt != z) { result = false }
      
      return result
    }

const calculate = (x,y,z) =>{
	x  = typeof x !== 'number' ?  0 : x ;
	y = typeof y !== 'number' ? 6:y;
	return  x % y === z
}