Hello小可爱们,还记得昨天的let、const吗?还记得块级作用域吗?还记得解构赋值吗?今天我们要接着往下介绍咯!这几次分享是扩展大礼包哟~
1
字符串的扩展
ES6加强了对Unicode的支持,并且扩展了字符串对象。这使得ES6能够使用新特性实现以前需要很麻烦的方法实现的事情。
模版字符串
还记得在传统的js中字符串拼接是怎样做的吗?我们来对比一下
传统JS:
var txt = '<p>'+rabbit.color+'</p>';
ES6:
var color='white';
var txt = `This rabbit is ${color}`;
在参数少的时候看不出什么,但是如果参数多了,我们就会发现没有那一堆+是多么的幸福!
ES6的模版字符串是增强版字符串,用(`)反引号标识,
(1)可以当作普通字符串使用
`The rabbit is so cute!`
(2)用来定义多行字符串,但是所有空格会保留在输出中
`I love
this rabbit!!!`
(3)在字符串中嵌入变量、表达式、对象属性、甚至是函数
var color='white';
`This rabbit is ${color}`;
var a = 1;
var b = 2;
var str = `sum = ${a+b}`;
var rabbit = {"name":"momo","color":"white"};
var baby = `the rabbit's name is ${rabbit.name},and it is ${rabbit.color}`;
function myRabbit(){
return 'carrot';
}
var dinner = `rabbit's dinner is ${$myRabbit()}`
标签模版
这是在模版字符串的基础上的一个概念。标签模版就是:当模版字符串跟在一个函数名后面,而函数被调用就是为了处理这个模版字符串的时候,这就是标签模版。标签模版函数的参数分为两部分,一部分是非模版字符串部分的一个数组,另一部分就是模版字符串了。举个例子吧~~
var color = 'white';
var age = 1;
myRabbit`It is ${age} year old, and it is ${color};
function myRabbit(stringArr, value1,value2)
console.log(stringArr);
// ['It is', 'year old, and it is']
console.log(value1);
// 1
console.log(color);
// 'white'
这下清晰了吧~第一个参数就是把不是模版字符串的给拆分形成一个字符串数组,后面就是模版字符串作为参数啦~
小伙伴们是不是会认为这个东西好鸡肋啊,最开始看到的时候兔妞也这么觉得,后面用用发现还真的好用呢~
当要对拼接的字符串做处理时,就可以封装一个这样的模版,就像封装函数一样方便呢!
常用函数
再来介绍几个字符串常用的新增函数吧~
1)includes():返回布尔值,就是找到要找的了
2)startsWith():返回布尔值,查询范围字符串是不是以要找的字符串开头的
3)endsWith():返回布尔值,查询范围字符串是不是以要找的字符串结尾的
4)repeat():返回新字符串,重复打印原字符串几遍
前三个函数可以传入一个或两个参数,一个参数就是要查询的字符串,两个参数的话第一个是要查询的字符串,第二个是查询起始位置
最后一个参数接受一个数字作为参数,表示重复几次。
var r = 'I am a lovely rabbit!'
r.includes('rabbit',0);
r.startsWith('a',1);
r.endsWith('e');
r.repeat(2);
今天的分享就到这里啦~~下一篇我们将继续分享数组的扩展,做好准备哦~~喜欢兔妞的文章就请关注+好看呦,越点好看越好看哦,么么哒!!!