资讯专栏INFORMATION COLUMN

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

Steve_Wang_ / 2385人阅读

摘要:字符串的扩展一字符串的遍历器接口为字符串添加了遍历器接口,使得字符串可以被循环遍历。返回布尔值,表示参数字符串是否在源字符串的头部。三方法返回一个新字符串,表示将原字符串重复次。如果模板字符串中的变量没有声明,将报错。

字符串的扩展 一、 字符串的遍历器接口

ES6 为字符串添加了遍历器接口,使得字符串可以被for...of循环遍历。

for (let codePoint of "foo") {
console.log(codePoint)
}
// "f"
// "o"
二、includes(), startsWith(), endsWith()

传统上, JavaScript 只有indexOf方法,可以用来确定一个字符串是否包含在另一个字符串中。 ES6 又提供了三种新方法。

includes() :返回布尔值,表示是否找到了参数字符串。

startsWith() :返回布尔值,表示参数字符串是否在源字符串的头部。

endsWith() :返回布尔值,表示参数字符串是否在源字符串的尾部。

var s = "Hello world!";
s.startsWith("Hello") // true
s.endsWith("!") // true
s.includes("o") // true

这三个方法都支持第二个参数,表示开始搜索的位置。

var s = "Hello world!";
s.startsWith("world", 6) // true
s.endsWith("Hello", 5) // true
s.includes("Hello", 6) // false

上面代码表示,使用第二个参数n时,endsWith的行为与其他两个方法有所不同。它针对前n个字符,而其他两个方法针对从第n个位置直到字符串结

束。

三、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,repeat视同为 0 。

"na".repeat(-0.9) // ""

如果repeat的参数是字符串,则会先转换成数字。

"na".repeat("na") // ""
"na".repeat("3") // "nanana"
四、模板字符串

模板字符串( template string )是增强版的字符串,用反引号( `)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中 嵌入变量。

//  普通字符串
`In JavaScript "
" is a line-feed.`
//  多行字符串
`In JavaScript this is
not legal.`
console.log(`string text line 1
string text line 2`);
//  字符串中嵌入变量
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

模板字符串中嵌入变量,需要将变量名写在${}之中。

大括号内部可以放入任意的 JavaScript 表达式,可以进行运算,以及引用对象属性

模板字符串之中还能调用函数。

如果大括号中的值不是字符串,将按照一般的规则转为字符串。比如,大括号中是一个对象,将默认调用对象的toString方法。

如果模板字符串中的变量没有声明,将报错。

正则的扩展

在 ES5 中, RegExp 构造函数的参数有两种情况

参数是字符串,这时第二个参数表示正则表达式的修饰符( flag )

var regex = new RegExp("xyz", "i");
//  等价于
var regex = /xyz/i;

参数是一个正则表示式,这时会返回一个原有正则表达式的拷贝

var regex = new RegExp(/xyz/i);
//  等价于
var regex = /xyz/i;

但是, ES5 不允许此时使用第二个参数,添加修饰符,否则会报错

var regex = new RegExp(/xyz/, "i");
// Uncaught TypeError: Cannot supply flags when constructing one RegExp from another

ES6 改变了这种行为。如果 RegExp 构造函数第一个参数是一个正则对象,那么可以使用第二个参数指定修饰符。而且,返回的正则表达式会忽略原有的正则表达式的修饰符,只使用新指定的修饰符

new RegExp(/abc/ig, "i").flags
// "i"

flags 属性

ES6 为正则表达式新增了flags属性,会返回正则表达式的修饰符。

// ES5 的 source 属性
//  返回正则表达式的正文
/abc/ig.source
// "abc"
// ES6 的 flags 属性
//  返回正则表达式的修饰符
/abc/ig.flags
// "gi"

数值的扩展 (一)、 二进制和八进制表示法

ES6 提供了二进制和八进制数值的新的写法,分别用前缀0b(或0B)和0o(或0O)表示。

0b111110111 === 503 // true
0o767 === 503 // true

从 ES5 开始,在严格模式之中,八进制就不再允许使用前缀0表示, ES6 进一步明确,要使用前缀0o表示。

//  非严格模式
(function(){
console.log(0o11 === 011);
})() // true
//  严格模式
(function(){
"use strict";
console.log(0o11 === 011);
})() // Uncaught SyntaxError: Octal literals are not allowed in strict mode.

如果要将0b和0o前缀的字符串数值转为十进制,要使用Number方法。

Number("0b111") // 7
Number("0o10") // 8
(二)、Number.isFinite(), Number.isNaN()

ES6 在 Number 对象上,新提供了Number.isFinite()和Number.isNaN()两个方法。

Number.isFinite()用来检查一个数值是否为有限的( finite )。

Number.isFinite(15); // true
Number.isFinite(0.8); // true
Number.isFinite(NaN); // false
Number.isFinite(Infinity); // false
Number.isFinite(-Infinity); // false
Number.isFinite("foo"); // false
Number.isFinite("15"); // false
Number.isFinite(true); // false

Number.isNaN()用来检查一个值是否为NaN。

Number.isNaN(NaN) // true
Number.isNaN(15) // false
Number.isNaN("15") // false
Number.isNaN(true) // false
Number.isNaN(9/NaN) // true
Number.isNaN("true"/0) // true
Number.isNaN("true"/"true") // true

它们与传统的全局方法isFinite()和isNaN()的区别在于,传统方法先调用Number()将非数值的值转为数值,再进行判断,而这两个新方法只对数值有效,非数值一律返回false

isFinite(25) // true
isFinite("25") // true
Number.isFinite(25) // true
Number.isFinite("25") // false
isNaN(NaN) // true
isNaN("NaN") // true
Number.isNaN(NaN) // true
Number.isNaN("NaN") // false
(三)、 Number.parseInt(), Number.parseFloat()

ES6 将全局方法parseInt()和parseFloat(),移植到 Number 对象上面,行为完全保持不变。

// ES5 的写法
parseInt("12.34") // 12
parseFloat("123.45#") // 123.45
// ES6 的写法
Number.parseInt("12.34") // 12
Number.parseFloat("123.45#") // 123.45

这样做的目的,是逐步减少全局性方法,使得语言逐步模块化。

Number.parseInt === parseInt // true
Number.parseFloat === parseFloat // true
(四)、 Number.isInteger()

Number.isInteger()用来判断一个值是否为整数。需要注意的是,在 JavaScript 内部,整数和浮点数是同样的储存方法,所以 3 和 3.0 被视为同一个值。

Number.isInteger(25) // true
Number.isInteger(25.0) // true
Number.isInteger(25.1) // false
Number.isInteger("15") // false
Number.isInteger(true) // false

ES6 在 Number 对象上面,新增一个极小的常量Number.EPSILON。

Number.EPSILON
// 2.220446049250313e-16
Number.EPSILON.toFixed(20)
// "0.00000000000000022204"

上篇深入理解ES6(解构)

往期经典前端面试题JavaScript详解

持续更新中~喜欢请留下个喜欢哦!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/113462.html

相关文章

  • 深入理解ES6)(符串扩展

    摘要:字符串的扩展一字符串的遍历器接口为字符串添加了遍历器接口,使得字符串可以被循环遍历。返回布尔值,表示参数字符串是否在源字符串的头部。三方法返回一个新字符串,表示将原字符串重复次。如果模板字符串中的变量没有声明,将报错。 字符串的扩展 一、 字符串的遍历器接口 ES6 为字符串添加了遍历器接口,使得字符串可以被for...of循环遍历。 for (let codePoint of foo...

    tainzhi 评论0 收藏0
  • 深入理解ES6笔记()函数

    摘要:主要知识点有函数参数默认值剩余参数扩展运算符属性块级函数箭头函数以及尾调用优化深入理解笔记目录函数的默认参数在中,我们给函数传参数,然后在函数体内设置默认值,如下面这种方式。拥有方法的函数被称为构造器。 主要知识点有:函数参数默认值、剩余参数、扩展运算符、new.target属性、块级函数、箭头函数以及尾调用优化showImg(https://segmentfault.com/img/...

    aristark 评论0 收藏0
  • 深入理解ES6》笔记——扩展对象功能性(4)

    摘要:将对象的属性拷贝到了对象,合并成一个新的对象。而这种行为也是新增的标准。总结本章讲解了对象字面量语法拓展,新增方法,允许重复的对象字面量属性,自有枚举属性排序,增强对象原型,明确了方法的定义。但是,就算把全部新增的功能记住也不是难事。 变量功能被加强了、函数功能被加强了,那么作为JavaScript中最普遍的对象,不加强对得起观众吗? 对象类别 在ES6中,对象分为下面几种叫法。(不需...

    baihe 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<