字符串的擴展以及新增方法

字符的 Unicode 表示法

能夠經過如下六種方式表示一個字符：

'\z' === 'z'  // true
'\172' === 'z' // true
'\x7A' === 'z' // true
'\u007A' === 'z' // true
'\u{7A}' === 'z' // true
// 當碼點大於 0xFFFF 的數值，須要將碼點放入大括號，才能被正確識別
複製代碼

而什麼是 Unicode 碼呢，是爲了統一全部文字的編碼而應運而生的，具體解釋Unicode 。

字符串的遍歷器接口

在以往的狀況下，咱們使用 for 循環來遍歷字符串或其餘，可是這樣的遍歷方式不能識別大於 0xFFFF 的碼點，新的 for ... of 循環能夠作到這一點。

let text = String.fromCodePoint(0x20BB7);
for(let i of text) {
  console.log(i);	// 吉
}
複製代碼

模版字符串

這個比較常常使用。

能夠保存單行/多行字符串，並保留其格式，一樣的也能夠轉義 \n 這樣的換行符之類的字符格式。一樣的能夠經過 \ 來轉義這個模版字符串符號：

`\`Yo\` World!` 
// "`Yo` World!"
複製代碼

除了基礎的使用${variable} 來在模版字符串中加入變量外，還能夠在${} 放入任意的 JavaScript 表達式，好比運算式、引用對象屬性、調用函數

let x = 1;
let y = 2;

`${x} + ${y} = ${x + y}`
// "1 + 2 = 3"

`${x} + ${y * 2} = ${x + y * 2}`
// "1 + 4 = 5"

let obj = {x: 1, y: 2};
`${obj.x + obj.y}`
// "3"
function fn() {
  return "Hello World";
}

`foo ${fn()} bar`
// foo Hello World bar
複製代碼

同時若是花括號內的值不是字符串,將調用對象的 toString 方法

let foo = {a:{b:1},c:2}

`${foo.a}`

// "[object Object]"

let bar = {a:{b:1,toString:function(){return 2}},c:3}
`${bar.a}`

// "2"
複製代碼

若是模板字符串中的變量沒有聲明，將報錯。

阮一峯老師中的一個很奇妙的例子：

const tmpl = addrs => ` <table> ${addrs.map(addr => ` <tr><td>${addr.first}</td></tr> <tr><td>${addr.last}</td></tr> `).join('')} </table> `;
const data = [
    { first: '<Jane>', last: 'Bond' },
    { first: 'Lars', last: '<Croft>' },
];

console.log(tmpl(data));
// <table>
//
// <tr><td><Jane></td></tr>
// <tr><td>Bond</td></tr>
//
// <tr><td>Lars</td></tr>
// <tr><td><Croft></td></tr>
//
// </table>
複製代碼

將一個模版字符串做爲函數的返回值拋出來，並在此模版字符串中使用另外一個模版字符串，引用函數的參數。此方法能夠動態的根據實時數據生成動態的表格（亦或是其餘的列表等之類的數據）。

標籤模版

更高級的使用模版字符串的方式-標籤模版。

新增方法

String.fromCodePoint()

Unicode 碼相關方法： 從 Unicode 碼點返回對應字符串；

String.raw()

Unicode 碼相關方法：返回一個斜槓都被轉義的字符串，每每用於模版字符串的處理方法^[1]

實例方法： CodePointAt()

根據一個字符，返回對應的字符碼點；

實例方法： normalize()

暫未了解

實例方法： includes() startsWith() endsWith()

在es5 中咱們有 indexOf() 來查詢某一個字符串在字符串中首次出現的位置：

let text = "text";

text.indexOf("es");	// 1
複製代碼

如今咱們可使用 includes() 返回的 boolean 來判斷要檢測的字符串是否在此字符串中：

let text = "text";

text.includes("te");	// true
複製代碼

經過 startsWith() 返回的boolean 判斷要查詢的字符串是否在另外一個字符串的頭部，使用 endsWith()判斷要查詢的字符串是否在另外一個字符串的尾部：

let text = "text";

text.startsWith("te");	// true
text.endsWith("st");	// 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 次：

'frank'.repeat(3);	// 'frankfrankfrank'
'frank',repeat(0);	// ''

複製代碼

若是參數是小於等於-1，或者等於 Infinity ,則報錯，

在 > -1 範圍內的數字若是是小數則會取整：

'x'.repeat(-0.3); // ''
'x'.repeat(NaN);	// ''
'x'.repeat(2.7);	// 'xx'

複製代碼

實例方法 padStart() / padEnd()

ES 2017 引入字符串補全長度的功能：

'x'.padStart(3,'a');	// 'aax'
'x'.padStart(3,'abc');	// 'abx'
'x'.padEnd(3,'b');	// 'xbb'
'x'.padEnd(3,'bcd');	// 'xbc'


複製代碼

實例方法：trimStart() / trimEnd()

ES2019 對字符串新增了 trimStart() & trimEnd() 這兩種方法。

let a = ' abc ';

a.trim();	// "abc"
a.trimStart();	// "abc "
a.trimEnd();	// " abc"

複製代碼

去除字符串中頭尾的 空格 / tab / 換行 等不可見的空白字符。

---

1. from 阮一峯老師 - es6入門 ↩︎