ES6 -- String 擴充套件方法解析

Unicode支援

Javascript允許採用\uxxxx的形式表示一個字元，但是這種表示僅限於/u0000 ~ /uFFFF之間。ES做出了改進，只要將碼點放入大括號糾正正確解讀

例子：

// ES5
console.log('\u0071'); // q
// ES6
console.log('\u{71}'); // q
複製程式碼

來個複雜一點的例子，ES6也能解讀出來

let jquery = 'JQuery';
// ES5
console.log(jquery); // JQuery
// ES6
console.log(j\u{71}uery); // JQuery
複製程式碼

上面的兩個都能正常輸入Jquery。

codePointAt() 方法

codePointAt()方法是返回char陣列的給定索引上的十進位制程式碼點（程式碼點是指可用於編碼字符集的數字），接受一個引數，引數是字串中的位置（從0開始）。

例子：

let name = '端coder';
console.log(name.codePointAt(0)); // 31471
console.log(name.codePointAt(0).toString(16)); //7aef
console.log('\u7aef'); // 端
複製程式碼

codePointAt方法在第一個字元上爭取的識別了‘端’，並返回了它的十進位制程式碼點31471。將他轉換成16進位制（用toString(16)方法轉）後，反編譯為漢字正確顯示為‘端’。

codePointAt()方法能夠正確判斷一個字元是由兩個位元組還是4個位元組組成。這也是彌補了charCodeAt和charAt的不足。

例子：

let temA = 't';
console.log(temA.codePointAt(0) > 0xFFFF); // false
        
let temB = '?';
console.log(temB.codePointAt(0) > 0xFFFF); // true
複製程式碼

在寫上面例子的時候發現下面的這個例子，即使是漢字也是輸出false。

例子：

let temA = 't';
console.log(temA.codePointAt(0) > 0xFFFF); // false
        
let temB = '端';
console.log(temB.codePointAt(0) > 0xFFFF); // false
複製程式碼

這是什麼原因？我查了下原來漢字Unicode也分不同型別，例如上面的“?”屬於擴充套件B，而“端”屬於基本漢字。

下面附上Unicode中文表示範圍，以供參考：

fromCodePoint() 方法

fromCodePoint屬於String物件的方法可以識別大於0xFFFF的字元，彌補了ES5fromCharCode的不足，在作用上又正好與codepointAt相反。

例子：

var temA = String.fromCodePoint(0x20164);
console.log(temA); // ?
var temB = String.fromCodePoint(0x20164, 0x7aef);
console.log(temB); // ?端
複製程式碼

如果String.fromCodePoint方法有多個引數，則會返回一個合併的字串。

字串的遍歷器介面

ES6為字串新增了遍歷器介面（Iterator),使得字串可以被for...of迴圈遍歷。

例子：

let text = '我是王小端coder';
for (let char of text){
    console.log(char);
}
// 上面等同與下面
for (let i = 0;i < text.length; i++){
    console.log(text[i]);
}
// 上面兩個等同於下面
for (let i in text){
    console.log(text[i]);
}
複製程式碼

includes() 方法

includes方法返回布林值，是否找到了引數字串。

例子：

let text = '我是王小端coder';
console.log(text.includes('端c')); // true
console.log(text.includes('端d')); // false
複製程式碼

startsWith() 方法

startsWith方法返回布林值，引數字串是否在原字串的頭部。

例子：

let text = '我是王小端coder';
console.log(text.startsWith('我是')); // true
console.log(text.startsWith('小端')); // false
複製程式碼

endsWith() 方法

endsWith方法返回布林值，引數字串是否在原字串的尾部。

例子：

let text = '我是王小端coder';
console.log(text.endsWith('coder')); // true
console.log(text.endsWith('小端')); // false
複製程式碼

repeat() 方法

repeat方法返回一個新字串，表示將原字串重複n次。

例子：

console.log('coder'.repeat(2)); // codercoder
console.log('端'.repeat('3')); // 端端端
複製程式碼

如果repeat的引數是負數或者Infinity，會報錯，如果是字串，會先轉換成數字，如果遇到不是數字的字元則預設輸入""。

raw() 方法

ES6 為String物件提供了一個raw方法，該方法用來充當模板字串的處理函式，返回一個斜槓都被轉義（即斜槓前面再加一個斜槓）的字串，對應於替換變數後的模板字串。如果原字串的斜槓已經轉義，那麼String.raw會進行再次轉義。

例子：

console.log(String.raw`王小端\ncoder`); // 王小端\ncoder
console.log(String.raw`王小端\\ncoder`); // 王小端\\ncoder
複製程式碼

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;
}
複製程式碼