深刻理解ES6（三）（字符串的擴展）

字符串的擴展

1、 字符串的遍歷器接口

• ES6 爲字符串添加了遍歷器接口，使得字符串能夠被for...of循環遍歷。

for (let codePoint of 'foo') {
console.log(codePoint)
}
// "f"
// "o"

2、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個位置直到字符串結

束。

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，repeat視同爲 0 。

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

• 若是repeat的參數是字符串，則會先轉換成數字。

'na'.repeat('na') // ""
'na'.repeat('3') // "nanana"

4、模板字符串

• 模板字符串（ 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'

---

• 上篇深刻理解ES6（解構）

• 往期經典前端面試題JavaScript詳解

持續更新中~喜歡請留下個喜歡哦！