深入理解ES6（三）（字符串的扩展）

2024年4月12日 144次阅读 来源: keywords

字符串的扩展

一、 字符串的遍历器接口

  • ES6 为字符串添加了遍历器接口，使得字符串可以被for…of循环遍历。
for (let codePoint of 'foo') {
console.log(codePoint)
}
// "f"
// "o"

二、includes(), startsWith(), endsWith()

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

    1. includes() ：返回布尔值，表示是否找到了参数字符串。
    2. startsWith() ：返回布尔值，表示参数字符串是否在源字符串的头部。
    3. 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 '\n' 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 构造函数的参数有两种情况

    1. 参数是字符串，这时第二个参数表示正则表达式的修饰符（ flag ）

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

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

      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()两个方法。

    1. 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
  1. 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'

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

        原文作者：keywords
        原文地址: https://segmentfault.com/a/1190000015232480
        本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
    点赞