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中文表示範圍，以供參考：

字符集	漢字	unicode編碼
基本漢字	20902字	4E00-9FA5
基本漢字補充	38字	9FA6-9FCB
擴展A	6582字	3400-4DB5
擴展B	42711字	20000-2A6D6
擴展C	4149字	2A700-2B734
擴展D	222字	2B740-2B81D
康熙部首	214字	2F00-2FD5
部首擴展	115字	2E80-2EF3
兼容漢字	477字	F900-FAD9

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

對於字符串模板因爲內容較多，平時也經常使用，咱們下次單獨寫一篇，我這裏不作講解。