ECMAScript正則表達(dá)式6個(gè)最新特性

es2018_regex2.jpg

譯者按: 還沒學(xué)好ES6捡鱼?ECMAScript 2018已經(jīng)到來啦!

為了保證可讀性毫深,本文采用意譯而非直譯吩坝。另外,本文版權(quán)歸原作者所有哑蔫,翻譯僅用于學(xué)習(xí)钉寝。

1999年,ECMAScript 3添加了對(duì)正則表達(dá)式的支持闸迷。

16年之后嵌纲,ECMAScript 6(即ECMAScript 2015或者ES6)引入了Unicode模式(u選項(xiàng)), sticky模式(y選項(xiàng))以及RegExp.prototype.flags的getter方法

這篇博客將介紹ECMAScript正則表達(dá)式的最新特性

1. dotAll模式(s選項(xiàng))

這個(gè)特性已經(jīng)在ECMAScript 2018正式發(fā)布了腥沽。

默認(rèn)情況下逮走,.可以匹配任意字符,除了換行符:

/foo.bar/u.test('foo\nbar'); // false

另外今阳,.不能匹配Unicode字符师溅,需要使用u選項(xiàng)啟用Unicode模式才行。

ES2018引入了dotAll模式酣栈,通過s選項(xiàng)可以啟用险胰,這樣,.就可以匹配換行符了矿筝。

/foo.bar/su.test('foo\nbar'); // true

2. Lookbehind斷言

這個(gè)特性已經(jīng)在ECMAScript 2018正式發(fā)布了起便。

ECMAScript目前僅支持lookahead斷言。

下面示例是Positive lookahead窖维,匹配字符串“42 dollars”中緊跟著是"dollars"的數(shù)字:

const pattern = /\d+(?= dollars)/u;
const result = pattern.exec('42 dollars');
console.log(result[0]); // 打印42

下面示例是Negative lookahead榆综,匹配字符串“42 pesos”中緊跟著的不是"dollars"的數(shù)字:

const pattern = /\d+(?! dollars)/u;
const result = pattern.exec('42 pesos');
console.log(result[0]); // 打印42

ES2018添加了lookbehind斷言

下面示例是Positive lookbehind铸史,匹配字符串“42”中前面是"\"的數(shù)字:

const pattern = /(?<=\$)\d+/u;
const result = pattern.exec('$42');
console.log(result[0]); // 打印42

下面示例是Negative lookbehind鼻疮,匹配字符串“42”中前面不是是"\"的數(shù)字:

const pattern = /(?<!\$)\d+/u;
const result = pattern.exec('€42');
console.log(result[0]); // 打印42

Fundebug專注于網(wǎng)頁(yè)、微信小程序琳轿、微信小游戲判沟,支付寶小程序,React Native崭篡,Node.js和Java線上BUG實(shí)時(shí)監(jiān)控挪哄,歡迎免費(fèi)試用

3. Named capture groups

這個(gè)特性已經(jīng)在ECMAScript 2018正式發(fā)布了。

目前琉闪,正則表達(dá)式中小括號(hào)匹配的分組是通過數(shù)字編號(hào)的:

const pattern = /(\d{4})-(\d{2})-(\d{2})/u;
const result = pattern.exec('2017-01-25');
console.log(result[0]); // 打印"2017-01-25"
console.log(result[1]); // 打印"2017"
console.log(result[2]); // 打印"01"
console.log(result[3]); // 打印"25"

這樣很方便迹炼,但是可讀性很差,且不易維護(hù)。一旦正則表達(dá)式中小括號(hào)的順序有變化時(shí)斯入,我們就需要更新對(duì)應(yīng)的數(shù)字編號(hào)砂碉。

ES2018添加named capture groups, 可以指定小括號(hào)中匹配內(nèi)容的名稱,這樣可以提高代碼的可讀性刻两,也便于維護(hù)增蹭。

const pattern = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/u;
const result = pattern.exec('2017-01-25');
console.log(result.groups.year); // 打印"2017"
console.log(result.groups.month); // 打印"01"
console.log(result.groups.day); // 打印"25"

4. Unicode property escapes

這個(gè)特性已經(jīng)在ECMAScript 2018正式發(fā)布了。

Unicode標(biāo)準(zhǔn)為每一個(gè)字符分配了多個(gè)屬性闹伪。比如沪铭,當(dāng)你要匹配希臘語(yǔ)字符時(shí),則可以搜索Script_Extensions屬性為Greek的字符偏瓤。

Unicode property escapes使得我們可以使用ECMAScript正則表達(dá)式直接匹配Unicode字符的屬性:

const regexGreekSymbol = /\p{Script_Extensions=Greek}/u;
console.log(regexGreekSymbol.test('π')); // 打印true

5. String.prototype.matchAll

這個(gè)特性還處在Stage 3 Draft

g和y選項(xiàng)通常用于匹配一個(gè)字符串杀怠,然后遍歷所有匹配的子串,包括小括號(hào)匹配的分組厅克。String.prototype.matchAll讓這個(gè)操作變得更加簡(jiǎn)單了赔退。

const string = 'Magic hex numbers: DEADBEEF CAFE 8BADF00D';
const regex = /\b[0-9a-fA-F]+\b/g;
for (const match of string.matchAll(regex)) {
    console.log(match);
}

每一個(gè)迭代所返回的match對(duì)象與regex.exec(string)所返回的結(jié)果相同:

// Iteration 1:
[
    'DEADBEEF',
    index: 19,
    input: 'Magic hex numbers: DEADBEEF CAFE 8BADF00D'
]

// Iteration 2:
[
    'CAFE',
    index: 28,
    input: 'Magic hex numbers: DEADBEEF CAFE 8BADF00D'
]

// Iteration 3:
[
    '8BADF00D',
    index: 33,
    input: 'Magic hex numbers: DEADBEEF CAFE 8BADF00D'
]

注意,這個(gè)特性還處在Stage 3 Draft证舟,因此還存在變化的可能性硕旗,示例代碼是根據(jù)最新的提案寫的。另外女责,瀏覽器也還沒有支持這個(gè)特性漆枚。String.prototype.matchAll最快可以被加入到ECMAScript 2019中。

6. 規(guī)范RegExp遺留特性

這個(gè)提案還處在Stage 3 Draft

這個(gè)提案規(guī)范了RegExp的遺留特性抵知,比如RegExp.prototype.compile方法以及它的靜態(tài)屬性從RegExp.$1RegExp.$9墙基。雖然這些特性已經(jīng)棄用(deprecated)了,但是為了兼容性我們不能將他們?nèi)ニ⑾病R虼瞬兄疲?guī)范這些RegExp遺留特性是最好的方法。因此掖疮,這個(gè)提案有助于保證兼容性初茶。

參考

關(guān)于Fundebug

Fundebug專注于JavaScript、微信小程序浊闪、微信小游戲恼布、支付寶小程序、React Native搁宾、Node.js和Java實(shí)時(shí)BUG監(jiān)控折汞。 自從2016年雙十一正式上線,F(xiàn)undebug累計(jì)處理了6億+錯(cuò)誤事件猛铅,得到了Google、360凤藏、金山軟件等眾多知名用戶的認(rèn)可奸忽。歡迎免費(fèi)試用堕伪!

版權(quán)聲明:
轉(zhuǎn)載時(shí)請(qǐng)注明作者Fundebug以及本文地址:
https://blog.fundebug.com/2018/08/30/ecmascript-regular-expression-new-features/

屏幕快照 2018-08-30 上午8.28.52.png
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市栗菜,隨后出現(xiàn)的幾起案子欠雌,更是在濱河造成了極大的恐慌,老刑警劉巖疙筹,帶你破解...
    沈念sama閱讀 223,126評(píng)論 6 520
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件富俄,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡而咆,警方通過查閱死者的電腦和手機(jī)霍比,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,421評(píng)論 3 400
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來暴备,“玉大人悠瞬,你說我怎么就攤上這事⊙哪恚” “怎么了浅妆?”我有些...
    開封第一講書人閱讀 169,941評(píng)論 0 366
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)障癌。 經(jīng)常有香客問我凌外,道長(zhǎng),這世上最難降的妖魔是什么涛浙? 我笑而不...
    開封第一講書人閱讀 60,294評(píng)論 1 300
  • 正文 為了忘掉前任康辑,我火速辦了婚禮,結(jié)果婚禮上蝗拿,老公的妹妹穿的比我還像新娘晾捏。我一直安慰自己,他們只是感情好哀托,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,295評(píng)論 6 398
  • 文/花漫 我一把揭開白布惦辛。 她就那樣靜靜地躺著,像睡著了一般仓手。 火紅的嫁衣襯著肌膚如雪胖齐。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,874評(píng)論 1 314
  • 那天嗽冒,我揣著相機(jī)與錄音呀伙,去河邊找鬼。 笑死添坊,一個(gè)胖子當(dāng)著我的面吹牛剿另,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 41,285評(píng)論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼雨女,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼谚攒!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起氛堕,我...
    開封第一講書人閱讀 40,249評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤馏臭,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后讼稚,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體括儒,經(jīng)...
    沈念sama閱讀 46,760評(píng)論 1 321
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,840評(píng)論 3 343
  • 正文 我和宋清朗相戀三年锐想,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了帮寻。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,973評(píng)論 1 354
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡痛倚,死狀恐怖规婆,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情蝉稳,我是刑警寧澤抒蚜,帶...
    沈念sama閱讀 36,631評(píng)論 5 351
  • 正文 年R本政府宣布,位于F島的核電站耘戚,受9級(jí)特大地震影響嗡髓,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜收津,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,315評(píng)論 3 336
  • 文/蒙蒙 一饿这、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧撞秋,春花似錦长捧、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,797評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至舅列,卻和暖如春肌割,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背帐要。 一陣腳步聲響...
    開封第一講書人閱讀 33,926評(píng)論 1 275
  • 我被黑心中介騙來泰國(guó)打工臣咖, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留拴念,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,431評(píng)論 3 379
  • 正文 我出身青樓亿絮,卻偏偏與公主長(zhǎng)得像丸升,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,982評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • 《夜宿山寺》教學(xué)設(shè)計(jì) [教學(xué)內(nèi)容] 《夜宿山寺》是唐代詩(shī)人李白的一首記游寫景短詩(shī)。它淋漓盡致地描繪出了山寺屹立山巔...
    晚起畫蛾眉閱讀 313評(píng)論 0 2
  • 舊時(shí)我家老屋坐落于一個(gè)幽靜的古鎮(zhèn)內(nèi)摩渺,四周粉墻黛瓦,巷外楊柳依依剂邮。春天一來,雪白的柳絮飄飄灑灑横侦,將門前清澈的綠水鍍上...
    緋蔚閱讀 387評(píng)論 0 2