當ES6趕上 字符串和正則表達式

寫在前面

字符串是一種重要的數據類型，而正則表達式則是賦予了編程人員更多操做字符串的能力。ES6的創做者爲字符串和正則表達式添加了許多的新功能。下面玲瓏未來進行一個全面的總結。

字符串和正則兩個部分各兩節，全文閱讀時間大約10分鐘

字符串

1.更好的Unicode支持

Unicode是一個字符集。將全世界全部的字符包含在一個集合裏，計算機只要支持這一個字符集，就能顯示全部的字符，不再會有亂碼了。

在es6出現以前，js字符串一直基於16位字符編碼進行構建。每16位序列是一個編碼單元，表明一個字符，Unicode0引入擴展字符集，16位字符編碼將再也不包含任何字符。編碼規則也所以變動。

對於UTF-16來講，碼位能夠有多個編碼單元表示，是表示不是組成。

對於UTF-16前2^16個碼位都是16位的編碼單元表示，這個範圍被稱做基本多文種平面BMP，當超過期，引入代理對，規定用兩個16位編碼單元表示一個碼位，即32位輔助平面字符。一個32位代理對錶示字符長度爲1，可是length屬性值爲2.

若是想進一步瞭解他能夠參考阮一峯的一片日誌：www.ruanyifeng.com/blog/2014/1… 日誌裏面說到的碼點就是碼位

1.1codePointAt（0）方法

在es6以前，charCodeAt（）方法返回字符每一個16位編碼單元對應的數值，再在es6中新增了codePointAt方法，codePointAt(0)返回的是位置0處的碼點或者說是位置0處的碼位，包含多個編碼單元>16進制上限FFFF,charCodeAt(0)方法返回的是位置0的第一個編碼單元.

所以能夠用此方法判斷一個字符佔用編碼單元的數量

function is32Bit(c) {
    
    return c.codePointAt(0) > 0xFFFF;
}
console.log(is32Bit("吉利"));  //true
console.log(is32Bit("a"));    //false
複製代碼

1.2 String.fromCodePoint（）方法

codePointAt()方法在字符串中檢索一個字符串的碼位，也可使用String.fromCodePoint()方法根據指定的碼位生成一個字

console.log(String.fromCodePoint(134071));   //吉
複製代碼

1.3normalize()方法

在比較字符或者進行排序的時候，可能出現等價的狀況，然而等價卻存在兩種狀況

• 規範的等效是不管從哪一個角度來看，兩個序列的碼位都是沒有區別的
• 兼容的碼位序列看起來不一樣，可是在特定的狀況下能夠交換使用。 可是在嚴格模式下不是等效的，除非經過某些方法把這種等效關係標準化

normalize()方法提供Unicode的標準化形式，，這個方法能夠接受一個可選的字符串參數。Unicode標準化形式有四種

• 以標準等價方式分解，而後以標準等價方式重組（「NFC」），默認值選項
• 以標準等價方式分解（「NFD」）
• 以兼容等價方式分解（「NFKC」）
• 以兼容方式分解，而後以標準等價方式重組

1.4 正則表達式u修飾符

正則表達式後添加u修飾符會將編碼單元模式切換成字符模式，這個時候的代理對不會被視爲兩個字符。

可是length這個屬性返回的仍然是字符串編碼單元的數量，而不是碼位的數量。可是也能夠經過帶u修飾符的正則表達式來解決這個問題。

function codePointerLength(text) {
    let result = text.match(/[\s\S]/gu);
    return result ? result.length:0;
}
console.log(codePointerLength("吉abc")); //4

複製代碼

檢測是否支持u修飾符

u修飾符在不兼容ES6的JavaScript引擎中使用會致使語法錯誤，能夠經過如下函數檢測是否支持。

function hasRegExpU() {
    try{
        var pattern = new Regexp(".","u");
        return ture;
    }catch (ex) {
        return false;
    }
}
複製代碼

2.其餘字符串的變動

2.1字符串中的字串識別

開發者們用indexOf（）方法在一段字符串中檢測另外一段子字符串。在es6中提供3個方法達到相似的效果

• startWith()方法，在字符串起始部分檢測指定文本返回true，不然返回false。
• incledes()方法，若是在字符串中檢測到指定文本返回true，不然返回false。
• endWith()方法，顧名思義在末尾檢測，用法與上面一致。

上面三個方法接受兩個參數，第1個參數是指定要搜索的文本是一個字符。第2個是開始搜索位置的索引值是一個數字。不指定第二個參數endwith通常從字符串末尾處開始匹配。示範以下

let mes = "hello world";

console.log(mes.startWith("hello"));
console.log(mes.endWith("!"));
console.log(mes.includes("o"));

console.log(mes.startWith("o"));
console.log(mes.endWith("d!"));
console.log(mes.includes("x"));

console.log(mes.startWith("o",4));
console.log(mes.endWith("o",8));
console.log(mes.includes("o",8));
//9個結果依次爲：true true true   false true false    true true false
複製代碼

console.log(mes.endWith("o",8));會從第7位第二個o開始匹配。索引值-要搜索文本的長度=8-1

2.2 repeat()方法

es6爲字符串新增長的repeat（）方法，接受一個number類型的參數，返回重複該次數的一個新字符串。

console.log(x.repeat(3)); //"xxx"

複製代碼

---

我是2條分割線，嘎嘎嘎

---

正則表達式

1.其餘正則表達式的變動

1.1正則表達式y修飾符

y修飾符粘滯正則表達式，從正則表達式的lastIndex屬性開始進行。若是指定位置沒有匹配成功那麼將中止匹配並返回結果。

let text =  'hello1 hello2 hello3';
let patt = /hello\d\s?/,
    result = patt.exec(text);
let gPatt = /helllo\d\s?/g,
    gResult = gPatt.exec(text);
let yPatt = /hello\d\s?/y,
    yResult = yPatt.exec(text);
    
console.log(resut[0]);   //"hello1 "
console.log(gResut[0]);   //"hello1 "
console.log(yResut[0]);   //"hello1 "

patt.lastIndex = 1;
gPatt.lastIndex = 1;
yPatt.lastIndex = 1;

result = patt.exec(text);
gResult = gPatt.exec(text);
yResult = yPatt.exec(text);

console.log(resut[0]);   //"hello1 "
console.log(gResut[0]);   //"hello2 "
console.log(yResut[0]);   //拋出錯誤

複製代碼

這裏三個正則表達式中，第一個沒有修飾符，第二個全局修飾符g，第三個用了y修飾符。

第一次匹配的時候是從h字符開始匹配。當lastIndex = 1;以後，對於沒有修飾符的表達式自動忽略這個變化，結果仍是hello1 ，g修飾符會從e字符開始匹配，輸出hello2 ，yResul會從e字符開始匹配，ello h與之不等，最後結果爲null，因此會拋出錯誤。

當執行y修飾符以後，會把上一次匹配最後的一個字符的後一位索引值保存在lastIndex中去，若是執行y修飾符匹配結果爲空那麼lastIndex值會被重置爲0，g修飾符與此相同。

只有調用正則表達式對象的exec（）和test（）這些方法時纔會設計lastIndex屬性，如調用字符串的方法natch()就不會觸發粘滯行爲。

檢測y修飾符是否存在能夠用sticky屬性，若是js引擎支持粘滯修飾符，則stickey屬性值爲true，不然爲false

let patt = /hello\d/y;
console.log(patt.sticky);
複製代碼

1.2正則表達式的複製

在es5中，能夠給正則表達式的構造函數傳遞正則表達式做爲參數來複制這個正則表達式。但事實第一個參數爲正則表達式的時候不能用第二個參數，es6中修改了這個行爲，第二個參數能夠是修飾符。

let re1 = /ab/i;
let re2 = new RegExp(re1,"g");
console.log(re1.toString());  // "/ab/i"
console.log(re2.toString());  // "/ab/g"
複製代碼

1.3flags屬性

es6新增的flags屬性會返回全部應用於當前正則表達式的修飾符

let re = /ab/g;
console.log(re.source);   //"ab"
console.log(re.flags);    //"g"
複製代碼

2.模板字面量

2.1基礎語法

一句話歸納，用反撇號（`）代替了雙引號，單引號。

若是想在字符串中用反撇號，就用\轉義便可。如

let message = `\`hello\`!`;
console.log(message);
複製代碼

結果是hello!

2.2簡化的多行字符串

在es6以前，經過數組或字符串拼接的方法來建立多行字符串，es6中只須要在代碼中直接換行，換行也改變length屬性值。同時再反撇號中全部的空格符都屬於字符串的一部分。

let message = `Multiline
string`;
console.log(message);
console.log(message.length);   //16=6+9+1
複製代碼

2.3 字符串佔位符

在一個模板字面量中，你能夠把任何合法的JavaScript表達式嵌入到佔位符中並將其做爲字符串的一部分輸出到結果中。

佔位符一般由${}組成，中間可包含任何JavaScript表達式。模板字面量自己也是JavaScript表達式，所以在一個模板字面量裏面能夠嵌入另一個模板字面量。

let name = "sarah";
let message = `my${`name is${name}.`}`;
console.log(message);//my name is sarah.
複製代碼

message是一個模板字面量，裏面又包含了name is${name}.這個模板字面量。

2.4 標籤模板

在模板字面量中使用原始值

經過String.raw標籤轉換成原生字符串

let message = String.raw`Mul\nddd`;
console.log(message); //"Mul\\nddd"由於\n的原生是\\n.
複製代碼

總結

• es6中codePointAt方法和String.fromCodePoint()方法實現碼位和字符串之間的轉化。

• 在比較字符串的時候，normalize()方法能夠將字符串標準化，標準化有四種形式，能夠更準確地比較字符串

• 還有新增的一些其餘方法檢測一個字符串裏面的子串，複製字符串。

• 在es6中的正則這一塊，新加了經過構造函數來複制正則表達式的語法，正則表達式中新增的y修飾符，以及用反撇號來代替雙，單引號的模板字面量。