ES6基础之字符串和函数的拓展详解
本文实例讲述了ES6基础之字符串和函数的拓展。分享给大家供大家参考，具体如下：
字符串的拓展
1.ES6为字符串添加了遍历器接口，因此可以使用for...of循环遍历字符串
2.字符串新增的includes()、startsWith()、endsWidth()三个方法用于判断某一字符串是否包含于另一字符串
- includes()：返回布尔值，表示源字符串中是否包含参数字符串。
- startsWith()：返回布尔值，表示参数字符串是否在源字符串的头部。
- endsWith()：返回布尔值，表示参数字符串是否在源字符串的尾部。
3.新增repeat()方法，该方法返回一个新字符串，不是对原字符串操作，表示将原字符串重复n次。
letstr='abc'; str.repeat(3)//abcabcabc str//abc
ps:该方法参数为正整数，如果为负数会报错，小数向下取整；
4.新增padStart()，padEnd()方法，用于补全字符串，该方法返回一个新字符串，不是对原字符串操作，传入两个参数，第一个参数用来指定字符串的最小长度，第二个参数是用来补全的字符串（缺省的话默认空格补全）。（ps：如果原字符串的长度，等于或大于指定的最小长度，则返回原字符串）；
letstr='abc'; str.padStart(2,'abc')//'abc' str.padEnd(2,'abc')//'abc'
5.模板字符串··（esc下面的那个按键），可以摆脱传统的字符串拼接的模式，直接将变量（表达式，对象的引用，函数等）写在模板字符串中输出
letstr='world';
lethtml=`hello${str}`;
html//hellowrold
ps：所有模板字符串的空格和换行，都是被保留的，可以使用trim方法消除换行。
6.标签模板，即模板字符串紧跟在一个函数名后面，该函数将被调用来处理这个模板字符串，这中方式被称为“标签模板”，“标签”指的就是函数，紧跟在后面的模板字符串就是它的参数
console.log`123` //等同于 console.log(123)
7.如果模板字符里面有变量，会将模板字符串先处理成多个参数，再调用函数;
vara=5;
varb=10;
functiontag(s,v1,v2){
console.log(s)
console.log(v1);
console.log(v2);
}
tag`Hello${a+b}world${a*b}`;
//['Hello','world','']
//15
//50
可以看出，tag函数第一个参数是一个数组，数组的成员是模板字符串中那些没有变量替换的部分，其他参数，都是模板字符串各个变量被替换后的值；
8.再来一个例子，看看标签模板的使用方法：
vartotal=30;
varmsg=passthru`Thetotalis${total}(${total*1.05}withtax)`;
functionpassthru(literals){
varresult='';
vari=0;
while(i
上述例子中，参数literals实际上是["Thetotalis","(","withtax)"],函数内部arguments的值是{"0":["Thetotalis","(","withtax)"],"1":30,"2":31.5}，通过以上梳理，可以将各个参数按照原来的位置拼合回去，最终得到输出为"Thetotalis30(31.5withtax)"
ps：在使用标签模板的时候，要注意参数的位置，可根据自己实际的需求进行修改，返回正确的结果；
函数的拓展
1.ES6允许为函数的参数设置默认值，即直接写在参数定义的后面，一目了然，十分实用
functionsay(x,y='World'){
console.log(x,y);
}
say('Hello')//HelloWorld
say('Hello','Kite')//HelloKite
2.函数参数默认已经声明，不能再用let或者const声明，而且不能有同名参数
3.一旦设置了参数的默认值，函数进行声明初始化时，参数会形成一个单独的作用域（context）。等到初始化结束，这个作用域就会消失；
varx=1;
functionf(x,y=x){
console.log(y);
}
f(2)//2
上面例子中，参数y的默认值等于变量x。调用函数f时，参数形成一个单独的作用域。在这个作用域里面，默认值变量x指向第一个参数x，而不是全局变量x，所以输出是2；
letx=1;
functionf(y=x){
letx=2;
console.log(y);
}
f()//1
上面例子中,函数f调用时，参数y=x形成一个单独的作用域。这个作用域里面，变量x本身没有定义，所以指向外层的全局变量x。函数调用时，函数体内部的局部变量x影响不到默认值变量x;
4.函数声明时，可以将某个参数默认值设为undefined，表明这个参数是可以省略的；
5.rest参数（形式为...变量名），用于获取函数的多余参数，该变量是一个数组，用于将多余的参数放入该数组中。（rest参数之后不能再有其他参数，它只能是函数的最后一个参数，否则会报错）
functionfunc(...params){
console.log(params)
}
func(1,2,3)//[1，2，3]
functionfunc(x,...params){
console.log(params)
}
func(1,2,3)//[2，3]
6.箭头函数（=>），ES6允许使用“箭头”（=>）定义函数，这种写法相比较ES5定义function看起来简洁得多；
varfunc=x=>x
//等同于
varfunc=functionfunc(x){
returnx;
};
7.如果箭头函数没有参数或者有多个参数的话，则需要加上()来进行声明；
varfunc=()=>'HelloWorld';
//等同于
varfunc=functionfunc(){
return'HelloWorld';
};
varfunc=(x,y)=>x+y
//等同于
varfunc=functionfunc(x,y){
returnx+y;
};
8.如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回;
varfunc=(x,y)=>{returnx+y;}
9.如果箭头函数直接返回一个对象，必须在对象外面加上括号;
varfunc=(x,y)=>({x:x,y:y})
10.箭头函数使用时必须注意以下几个问题：
函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象；
functionfoo(){
setTimeout(()=>{
console.log('id:',this.id);
},100);
}
varid=21;
foo.call({id:42});//42
上面代码中，setTimeout的参数是一个箭头函数，这个箭头函数的定义生效是在foo函数生成时，而它的真正执行要等到100毫秒后。如果是普通函数，执行时this应该指向全局对象window，这时应该输出21。但是，箭头函数导致this总是指向函数定义生效时所在的对象（本例是{id:42}），所以输出的是42。
- 箭头函数不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误；
- 不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用rest参数代替
- 不可以使用yield命令，因此箭头函数不能用作Generator函数。
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。