ES6 新知識點 1.0

一、String.fromCodePoint()【 Unicode 碼點返回對應字符】

ES5 提供String.fromCharCode()方法，用於從 Unicode 碼點返回對應字符，但是這個方法不能識別碼點大於0xFFFF的字符。

    String.fromCharCode(0x20BB7)
    // "ஷ"

上面代碼中，String.fromCharCode()不能識別大於0xFFFF的碼點，所以0x20BB7就發生了溢出，最高位2被捨棄了，最後返回碼點U+0BB7對應的字符，而不是碼點U+20BB7對應的字符。
ES6 提供了String.fromCodePoint()方法，可以識別大於0xFFFF的字符，彌補了String.fromCharCode()方法的不足。在作用上，正好與下面的codePointAt()方法相反。

    String.fromCodePoint(0x20BB7)
    // "𠮷"
    String.fromCodePoint(0x78, 0x1f680, 0x79) === 'x\uD83D\uDE80y'
    // true

上面代碼中，如果String.fromCodePoint方法有多個參數，則它們會被合併成一個字符串返回。
注意，fromCodePoint方法定義在String對象上，而codePointAt方法定義在字符串的實例對象上。

二、String.raw()【該方法返回一個斜槓都被轉義（即斜槓前面再加一個斜槓）的字符串】

ES6 還爲原生的 String 對象，提供了一個raw()方法。該方法返回一個斜槓都被轉義（即斜槓前面再加一個斜槓）的字符串，往往用於模板字符串的處理方法。

String.raw`Hi\n${2+3}!`;
// 返回 "Hi\\n5!"

String.raw`Hi\u000A!`;
// 返回 "Hi\\u000A!"

如果原字符串的斜槓已經轉義，那麼String.raw()會進行再次轉義。

String.raw`Hi\\n`
// 返回 "Hi\\\\n"

String.raw`Hi\\n` === "Hi\\\\n" // true

String.raw()方法可以作爲處理模板字符串的基本方法，它會將所有變量替換，而且對斜槓進行轉義，方便下一步作爲字符串來使用。
String.raw()方法也可以作爲正常的函數使用。這時，它的第一個參數，應該是一個具有raw屬性的對象，且raw屬性的值應該是一個數組。

String.raw({ raw: 'test' }, 0, 1, 2);
// 't0e1s2t'

// 等同於
String.raw({ raw: ['t','e','s','t'] }, 0, 1, 2);

作爲函數，String.raw()的代碼實現基本如下。

String.raw = function (strings, ...values) {
  let output = '';
  let index;
  for (index = 0; index < values.length; index++) {
    output += strings.raw[index] + values[index];
  }

  output += strings.raw[index]
  return output;
}

三、實例方法：includes(), startsWith(), endsWith()【判斷=== 返回布爾值】

傳統上，JavaScript 只有indexOf方法，可以用來確定一個字符串是否包含在另一個字符串中。ES6 又提供了三種新方法。
includes()：返回布爾值，表示是否找到了參數字符串。
startsWith()：返回布爾值，表示參數字符串是否在原字符串的頭部。
endsWith()：返回布爾值，表示參數字符串是否在原字符串的尾部。

let s = 'Hello world!';

s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true

這三個方法都支持第二個參數，表示開始搜索的位置。

let 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) // ""

參數NaN等同於 0。

'na'.repeat(NaN) // ""

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

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

五、實例方法：padStart()，padEnd()【字符串補全長度功能】

ES2017 引入了字符串補全長度的功能。如果某個字符串不夠指定長度，會在頭部或尾部補全。padStart()用於頭部補全，padEnd()用於尾部補全。

'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'

'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'

上面代碼中，padStart()和padEnd()一共接受兩個參數，第一個參數是字符串補全生效的最大長度，第二個參數是用來補全的字符串。
如果原字符串的長度，等於或大於最大長度，則字符串補全不生效，返回原字符串。

'xxx'.padStart(2, 'ab') // 'xxx'
'xxx'.padEnd(2, 'ab') // 'xxx'

如果用來補全的字符串與原字符串，兩者的長度之和超過了最大長度，則會截去超出位數的補全字符串。

'abc'.padStart(10, '0123456789')
// '0123456abc'

如果省略第二個參數，默認使用空格補全長度。

'x'.padStart(4) // '   x'
'x'.padEnd(4) // 'x   '

padStart()的常見用途是爲數值補全指定位數。下面代碼生成 10 位的數值字符串。

'1'.padStart(10, '0') // "0000000001"
'12'.padStart(10, '0') // "0000000012"
'123456'.padStart(10, '0') // "0000123456"

另一個用途是提示字符串格式。

'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"

六、實例方法：trimStart()，trimEnd()【消除字符串的空格】

ES2019 對字符串實例新增了trimStart()和trimEnd()這兩個方法。它們的行爲與trim()一致，trimStart()消除字符串頭部的空格，trimEnd()消除尾部的空格。它們返回的都是新字符串，不會修改原始字符串。

const s = '  abc  ';

s.trim() // "abc"
s.trimStart() // "abc  "
s.trimEnd() // "  abc"

上面代碼中，trimStart()只消除頭部的空格，保留尾部的空格。trimEnd()也是類似行爲。
除了空格鍵，這兩個方法對字符串頭部（或尾部）的 tab 鍵、換行符等不可見的空白符號也有效。
瀏覽器還部署了額外的兩個方法，trimLeft()是trimStart()的別名，trimRight()是trimEnd()的別名。