ES6入門之正則的擴展

時間 2019-11-16

原文原文鏈接

1. 正則的擴展

參數爲字符串，那麼第二個參數表示正則表達式的修飾符，以下：

var regex = new RegExp('xyz', 'i')  
// 等價於
var regex = /xyz/i

參數爲一個正則表達式，這時返回一個原有正則表達式的拷貝。以下：

var regex = new RegExp(/xyz/i)
// 等價於
var regex = /xyz/i

Es6中改變了這種行文。若是RegExp構造函數第一個參數是正則對象，那第二個參數能夠指定修飾符，而且返回的正則表達式會忽略原有正則表達式的修飾符，只使用新指定的修飾符。以下：

new RegExp(/abc/ig, 'i').flags
// 原有的ig 被 i 覆蓋

2. 字符串的正則方法

字符串對象共有4個方法，可使用正則表達式： match()、 replace()、search() 和 split()。在Es6中所有調用RegExp的實例方法，所有定義在RegExp對象上。以下：

String.prototype.match 調用 RegExp.prototype[Symbol.match]
String.prototype.replace 調用 RegExp.prototype[Symbol.replace]
String.prototype.search 調用 RegExp.prototype[Symbol.search]
String.prototype.split 調用 RegExp.prototype[Symbol.split

3. u 修飾符

ES6 對正則表達式添加了 u 修飾符，用來正確處理大於uFFFF的Unicode字符。以下：

/^\uD83D/u.test('\uD83D\uDC2A') // false
/^\uD83D/.test('\uD83D\uDC2A') // true
// 如上代碼由於在ES5中 不支持四個字節的 UTF-16編碼，會將爲識別爲兩個字符 致使 第二行爲true
可是加了 u 修飾符後，ES6將爲識別爲一個字符，因此第一行爲flase

4. RegExp.prototype.unicode 屬性

正則實例對象新增 unicode 屬性，用來判斷表示是否設置了u修飾符，以下：

const r1 = /hello/;
const r2 = /hello/u;

r1.unicode // false
r2.unicode // true

5. y 修飾符

和 g 修飾符類似，全局匹配，可是下次匹配都是從上次匹配成功的下一個位置開始。而g 只要剩餘位置中存在匹配便可，y 必須從剩餘的第一個位置開始。以下：

var s = 'aaa_aa_a';
var r1 = /a+/g;
var r2 = /a+/y;

r1.exec(s) // ["aaa"]
r2.exec(s) // ["aaa"]

r1.exec(s) // ["aa"]
r2.exec(s) // null

// 第一次執行後 爲 _aa_a g 只要剩餘位置存在便可匹配，返回 aa
// y 則是從上一次結果後的第一個位置開始，由於是_ 因此返回null

6. RegExp.prototype.sticky 屬性

與y修飾符相匹配，ES6 的正則實例對象多了sticky屬性，表示是否設置了y修飾符以下：

var r = /hello\d/y;
r.sticky // true

7. RegExp.prototype.flags 屬性

ES6 爲正則表達式新增了flags屬性，會返回正則表達式的修飾符。

// ES5 的 source 屬性
// 返回正則表達式的正文
/abc/ig.source
// "abc"

// ES6 的 flags 屬性
// 返回正則表達式的修飾符
/abc/ig.flags
// 'gi'

8. s 修飾符：dotAll 模式

匹配的是任意單個字符,用來匹配任意單個字符，以下：

/foo.bar/s.test('foo\nbar') // true

9. Unicode 屬性類

ES2018 引入了一種新的類的寫法p{...}和P{...}，容許正則表達式匹配符合 Unicode 某種屬性的全部字符。

const regexGreekSymbol = /\p{Script=Greek}/u;
regexGreekSymbol.test('π') // true

10. 具名組匹配

正常多個匹配可能用圓括號包起，以下：

const RE_DATE = /(\d{4})-(\d{2})-(\d{2})/;

const matchObj = RE_DATE.exec('1999-12-31');
const year = matchObj[1]; // 1999
const month = matchObj[2]; // 12
const day = matchObj[3]; // 31

可是以上的寫法不容易看懂，理解較爲困難，並且只能用數字序號，另外若是數組順序變了，還須要修改引用的序號。因此就有了具名組匹配。容許爲每個組匹配指定一個名字，既便於閱讀代碼，又便於引用。即便組的順序變了，葉不用去更改匹配後的處理代碼。以下：前端

const RE_DATE = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;

const matchObj = RE_DATE.exec('1999-12-31');
const year = matchObj.groups.year; // 1999
const month = matchObj.groups.month; // 12
const day = matchObj.groups.day; // 31

// 格式： 「具名組匹配」在圓括號內部，模式的頭部添加「問號 + 尖括號 + 組名」（?<year>）