字符串
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
}