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

本文介绍ES6中字符串的格式化、includes、repeat、startsWith/endsWith、padStart/padEnd等功能,以及函数参数默认值和箭头函数的使用技巧。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

字符串

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
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值