您好,登录后才能下订单哦!
小编给大家分享一下ES6基础中字符串和函数的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
字符串的拓展
1.ES6为字符串添加了遍历器接口,因此可以使用for...of循环遍历字符串
2.字符串新增的 includes()、startsWith()、endsWidth() 三个方法用于判断某一字符串是否包含于另一字符串
includes():返回布尔值,表示源字符串中是否包含参数字符串。
startsWith():返回布尔值,表示参数字符串是否在源字符串的头部。
endsWith():返回布尔值,表示参数字符串是否在源字符串的尾部。
3.新增 repeat() 方法, 该方法返回一个新字符串,不是对原字符串操作,表示将原字符串重复n次。
let str = 'abc'; str.repeat(3) //abcabcabc str //abc
ps:该方法参数为正整数,如果为负数会报错,小数向下取整;
4.新增 padStart(),padEnd() 方法,用于补全字符串,该方法返回一个新字符串,不是对原字符串操作,传入两个参数,第一个参数用来指定字符串的最小长度,第二个参数是用来补全的字符串(缺省的话默认空格补全)。(ps:如果原字符串的长度,等于或大于指定的最小长度,则返回原字符串);
let str = 'abc'; str.padStart(2, 'abc') // 'abc' str.padEnd(2, 'abc') // 'abc'
5.模板字符串··(esc下面的那个按键),可以摆脱传统的字符串拼接的模式,直接将变量(表达式,对象的引用,函数等)写在模板字符串中输出
let str = 'world'; let html = `hello ${str}`; html //hello wrold
ps:所有模板字符串的空格和换行,都是被保留的,可以使用trim方法消除换行。
6.标签模板,即模板字符串紧跟在一个函数名后面,该函数将被调用来处理这个模板字符串,这中方式被称为“标签模板”,“标签”指的就是函数,紧跟在后面的模板字符串就是它的参数
console.log `123` // 等同于 console.log (123)
7.如果模板字符里面有变量,会将模板字符串先处理成多个参数,再调用函数;
var a = 5; var b = 10; function tag(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.再来一个例子,看看标签模板的使用方法:
var total = 30; var msg = passthru`The total is ${total} (${total*1.05} with tax)`; function passthru(literals) { var result = ''; var i = 0; while (i < literals.length) { result += literals[i++]; if (i < arguments.length) { result += arguments[i]; } } return result; }
上述例子中,参数 literals 实际上是 <code> ["The total is "," ("," with tax)"] </code> , 函数内部 arguments 的值是 <code>{ "0" : ["The total is "," ("," with tax)"] , "1" : 30 , "2" : 31.5 }</code>,通过以上梳理,可以将各个参数按照原来的位置拼合回去,最终得到输出为<code>"The total is 30 (31.5 with tax)"</code>
ps:在使用标签模板的时候,要注意参数的位置,可根据自己实际的需求进行修改,返回正确的结果;
函数的拓展
1.ES6 允许为函数的参数设置默认值,即直接写在参数定义的后面,一目了然,十分实用
function say( x , y = 'World') { console.log( x , y); } say('Hello') // Hello World say('Hello','Kite') //Hello Kite
2.函数参数默认已经声明,不能再用 let 或者 const 声明,而且不能有同名参数
3.一旦设置了参数的默认值,函数进行声明初始化时,参数会形成一个单独的作用域(context)。等到初始化结束,这个作用域就会消失;
var x = 1; function f(x, y = x) { console.log(y); } f(2) // 2
上面例子中,参数y的默认值等于变量x。调用函数f时,参数形成一个单独的作用域。在这个作用域里面,默认值变量x指向第一个参数x,而不是全局变量x,所以输出是2;
let x = 1; function f( y = x ) { let x = 2; console.log(y); } f() // 1
上面例子中,函数f调用时,参数y=x形成一个单独的作用域。这个作用域里面,变量x本身没有定义,所以指向外层的全局变量x。函数调用时,函数体内部的局部变量x影响不到默认值变量x;
4.函数声明时,可以将某个参数默认值设为undefined,表明这个参数是可以省略的;
5.rest 参数(形式为...变量名),用于获取函数的多余参数,该变量是一个数组,用于将多余的参数放入该数组中。(rest 参数之后不能再有其他参数,它只能是函数的最后一个参数,否则会报错)
function func(...params){ console.log(params) } func(1,2,3) // [1,2,3] function func( x , ...params){ console.log(params) } func(1,2,3) // [2,3]
6.箭头函数(=>),ES6 允许使用“箭头”(=>)定义函数,这种写法相比较 ES5 定义 function 看起来简洁得多;
var func = x => x //等同于 var func = function func(x) { return x; };
7.如果箭头函数没有参数或者有多个参数的话,则需要加上()来进行声明;
var func = () => 'Hello World'; //等同于 var func = function func() { return 'Hello World'; }; var func = ( x , y ) => x + y //等同于 var func = function func(x, y) { return x + y; };
8.如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回;
var func = ( x , y ) => { return x + y; }
9.如果箭头函数直接返回一个对象,必须在对象外面加上括号;
var func = ( x , y ) => ({ x : x , y : y })
10.箭头函数使用时必须注意以下几个问题:
函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象;
function foo() { setTimeout(() => { console.log('id:', this.id); }, 100); } var id = 21; foo.call({ id: 42 }); //42
上面代码中,setTimeout的参数是一个箭头函数,这个箭头函数的定义生效是在foo函数生成时,而它的真正执行要等到100毫秒后。如果是普通函数,执行时this应该指向全局对象window,这时应该输出21。但是,箭头函数导致this总是指向函数定义生效时所在的对象(本例是{id: 42}),所以输出的是42。
箭头函数不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误;
不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替
不可以使用yield命令,因此箭头函数不能用作 Generator 函数。
以上是“ES6基础中字符串和函数的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。