当前位置: 首页 > Web前端 > HTML5

深入理解ES6(三)(字符串扩展)

时间:2023-04-05 22:56:10 HTML5

字符串扩展1、字符串遍历器接口ES6为字符串增加了遍历器接口,这样就可以通过for...of循环遍历字符串。for(letcodePointof'foo'){console.log(codePoint)}//"f"//"o"2.includes(),startsWith(),endsWith()传统上,JavaScript只有indexOf方法,可以用来判断一个字符串是否包含在另一个字符串中。ES6提供了三种新方法。includes():返回一个布尔值,指示是否找到参数字符串。startsWith():返回一个布尔值,指示参数字符串是否位于源字符串的开头。endsWith():返回一个布尔值,指示参数字符串是否在源字符串的末尾。vars='Helloworld!';s.startsWith('Hello')//trues.endsWith('!')//trues.includes('o')//true三个方法都支持第二个参数,表示从哪里开始搜索。vars='Helloworld!';s.startsWith('world',6)//trues.endsWith('Hello',5)//trues.includes('Hello',6)//false上面的代码意味着,endsWith的行为不同于其他两种方法当使用第二个参数n时。它以前n个字符为目标,而其他两种方法以从第n个位置开始直到字符串末尾为目标。3、repeat()repeat方法返回一个新的字符串,也就是将原字符串重复n次。'x'.repeat(3)//"xxx"'hello'.repeat(2)//"hellohello"'na'.repeat(0)//如果""参数是小数,则四舍五入。'na'.repeat(2.9)//"nana"如果repeat参数为负数或Infinity,会报错'na'.repeat(Infinity)//RangeError'na'.repeat(-1)//RangeError但是,如果参数是0到-1之间的小数,则等于0,因为会先进行四舍五入操作。0到-1之间的小数,四舍五入后等于-0,重复为0。'na'.repeat(-0.9)//""如果repeat参数是字符串,会先转为数字。'na'.repeat('na')//""'na'.repeat('3')//"nanana"4.模板字符串模板字符串(templatestring)是字符串的加强版,使用反引号标记(`)标记。可以当普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。//普通字符串`在JavaScript中'\n'是一个换行符。`//多行字符串`在JavaScript中这是不合法的。`console.log(`stringtextline1stringtextline2`);//在字符串中嵌入变量varname="Bob",time="today";`Hello${name},howareyou${time}?`在模板字符串中嵌入变量,需要在$中写入变量名{}之中。大括号内可以放置任意JavaScript表达式,可以执行操作,可以在引用的对象属性模板字符串中调用函数。如果花括号中的值不是字符串,则会按照正常规则转换为字符串。比如花括号里面有一个对象,默认会调用这个对象的toString方法。如果模板字符串中的变量没有声明,就会报错。正则展开在ES5中,RegExp构造函数的参数有两种情况。参数是一个字符串。这时,第二个参数代表正则表达式的修饰符(flag)。varregex=newRegExp('xyz','i');//等价于varregex=/xyz/i;参数为正则表达式,会返回原正则表达式的副本varregex=newRegExp(/xyz/i);//等价因为varregex=/xyz/i;但是ES5此时不允许使用第二个参数,加修饰符,否则会报错varregex=newRegExp(/xyz/,'i');//UncaughtTypeError:Cannotsupplyflagswhenconstructing来自另一个ES6的一个RegExp改变了这种行为。如果RegExp构造函数的第一个参数是常规对象,则可以使用第二个参数指定修饰符。而且,返回的正则表达式会忽略原正则表达式的修饰符,只使用新指定的修饰符newRegExp(/abc/ig,'i').flags//"i"flagsattributeES6isregularAnewflags属性已添加到表达式,它将返回正则表达式的修饰符。//ES5的source属性//返回正则表达式的文本/abc/ig.source//"abc"//ES6的flags属性//返回正则表达式的修饰符/abc/ig.flags//'gi'数值扩展(一)、二进制和八进制表示法ES6提供了一种新的二进制和八进制值的书写方式,分别用前缀0b(或0B)和0o(或0O)表示。0b111110111===503//true0o767===503//true从ES5开始,在严格模式下,八进制不再允许使用前缀0。ES6进一步明确了应该使用前缀0o。//非严格模式(function(){console.log(0o11===011);})()//true//严格模式(function(){'usestrict';console.log(0o11===011);})()//未捕获的语法错误:严格模式下不允许使用八进制文字。如果要将以0b和0o为前缀的字符串值转换为十进制,使用Number方法。Number('0b111')//7Number('0o10')//8(二),Number.isFinite(),Number.isNaN()ES6在Number对象上,新提供了Number.isFinite()和Number.isNaN()两种方法。Number.isFinite()用于检查一个值是否是有限的(finite)。Number.isFinite(15);//trueNumber.isFinite(0.8);//trueNumber.isFinite(NaN);//falseNumber.isFinite(Infinity);//falseNumber.isFinite(-Infinity);//falseNumber.isFinite('foo');//falseNumber.isFinite('15');//falseNumber.isFinite(true);//falseNumber.isNaN()用于检查值是否为NaN。Number.isNaN(NaN)//trueNumber.isNaN(15)//falseNumber.isNaN('15')//falseNumber.isNaN(true)//falseNumber.isNaN(9/NaN)//trueNumber.isNaN('true'/0)//trueNumber.isNaN('true'/'true')//true它们与传统全局方法isFinite()和isNaN()的区别在于传统方法首先调用Number()将非数字值将其转换为值,然后进行判断,并且这两个新方法只对值有效,非值返回false。25")//falseisNaN(NaN)//trueisNaN("NaN")//trueNumber.isNaN(NaN)//trueNumber.isNaN("NaN")//false(三),Number.parseInt(),Number.parseFloat()ES6将全局方法parseInt()和parseFloat()移植到Number对象上,行为完全保持不变//ES5的写法parseInt('12.34')//12parseFloat('123.45#')//123.45//ES6写法Number.parseInt('12.34')//12Number.parseFloat('123.45#')//123.45这样做的目的是逐渐减少全局方法,让语言逐渐模块化Number.parseInt===parseInt//trueNumber.parseFloat===parseFloat//true(四)、Number.isInteger()Number.isInteger()用于判断一个值是否为整数。注意在JavaScript内部,整数和浮点数存储方式相同,因此3和3.0被视为相同的值。Number.isInteger(25)//trueNumber.isInteger(25.0)//trueNumber.isInteger(25.1)//falseNumber.isInteger("15")//falseNumber.isInteger(true)//falseES6在Number对象上方,添加A微小的常量Number.EPSILON。Number.EPSILON//2.220446049250313e-16Number.EPSILON.toFixed(20)//'0.00000000000000022204'第一部分深入理解ES6(解构)以往经典前端面试题JavaScript详解持续更新中~喜欢就点个赞吧!