1. 程式人生 > >ES6標準入門之正則表示式的拓展

ES6標準入門之正則表示式的拓展

  所謂正則表示式,又稱規則表示式。(英語:Regular Expression,在程式碼中常簡寫為regex、regexp或RE),電腦科學的一個概念。正則表示式通常被用來檢索、替換那些符合某個模式(規則)的文字。在之前使用基於Jquery庫開發專案的時候,用的正則表示式最多的就是一些輸入框的檢驗,比如檢驗電話號碼或者郵箱的格式是否合適等。

  在ES5中,RegExp建構函式的引數有兩種情況:

  一、引數是字串,這是第二個引數標識正則表示式的修飾符(flag)。

  var regex = new RegExp('xyz', 'i');

  //  等價於 var regex = /xyz/i;

  二、引數是一個正則表示式,這時會返回一個原有正則表示式的拷貝。

  var regex = new RegExp( /xyz/i) ;

  //  等價於 var regex = /xyz/i;

  但是ES5不允許此時使用第二個引數新增修飾符,即第一種方式,否則就會報錯。ES6改變了這種行為,如果RegExp建構函式第一個引數是正則表示式,那麼可以使用第二個引數指定修飾符。而且,返回的正則表示式會忽略原有正則表示式的修飾符,只有重新指定。下面為大家介紹一下ES6對正則表示式新增的各種修飾符:

  1、u修飾符

  ES6對正則表示式新增u修飾符,含義為“Unicode模式”,用來正確處理大於\uFFFF的Unicode字元,也就是說可以正確處理4個位元組的UTF-16編碼。

  2、y修飾符

  y修飾符又叫粘連,與g修飾符類似,都是從上一次匹配成功的下一個位置開始,只不過y修飾符會確保匹配必須從剩餘的第一個位置開始。

  3、s修飾符

  s修飾符就是doAll模式,字串中所有的字元都匹配,包括換行符(\n)、回車符(\r)等。

  介紹完各種修飾符之後,為大家重點介紹具名組匹配,簡而言之就是正則表示式使用圓括號進行組匹配,先看下面一段程式碼

  

  
1 const RE_DATA = /(\d{4})-(\d{2})-(\d{2})/;
2 const maset = RE_DATA.exec('1999-12-31');
3 console.log(maset[1]); 4 console.log(maset[2]); 5 console.log(maset[3]); 6 7 // 1999 8 // 12 9 // 31
組匹配

  看完這段程式碼是不是覺得之前自己處理時間的時候白白寫了很多程式碼,反正我是這樣覺得的,我一直都是對後臺傳給我的時間欄位進行split分隔,顯得很low,有了組匹配是不是高大上了很多,嘿嘿。

  所謂具名組匹配就是在圓括號內部,在模式的頭部新增“問號 + 尖括號 + 組名”,然後在exec方法中返回結果的groups屬性上引用該組名,看下面程式碼

  
 1 const RE_DATA_REG = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
 2 
 3 const maset_re = RE_DATA_REG.exec('1999-12-31');
 4 
 5 console.log(maset_re.groups.year);
 6 console.log(maset_re.groups.year);
 7 console.log(maset_re.groups.year);
 8 
 9 
10 //       1999
11 //       12
12 //       31
View Code