本文實(shí)例講述了ES6正則的擴(kuò)展。分享給大家供大家參考，具體如下：

1. RegExp構(gòu)造函數(shù)

ES5中，RegExp構(gòu)造函數(shù)的參數(shù)：

參數(shù)是字符串，這時(shí)第二個(gè)參數(shù)表示正則表達(dá)式的修飾符（flag）

參數(shù)是一個(gè)正則表示式，這時(shí)會(huì)返回一個(gè)原有正則表達(dá)式的拷貝。但是，ES5不允許此時(shí)使用第二個(gè)參數(shù)，添加修飾符，否則會(huì)報(bào)錯(cuò)。

ES6改變了這種行為。如果RegExp構(gòu)造函數(shù)第一個(gè)參數(shù)是一個(gè)正則對(duì)象，那么可以使用第二個(gè)參數(shù)指定修飾符。而且，返回的正則表達(dá)式會(huì)忽略原有的正則表達(dá)式的修飾符，只使用新指定的修飾符。

2. 字符串的正則表達(dá)式

字符串對(duì)象共有4個(gè)方法，可以使用正則表達(dá)式：match()、replace()、search()和split()。

ES6將這4個(gè)方法，在語(yǔ)言內(nèi)部全部調(diào)用RegExp的實(shí)例方法，從而做到所有與正則相關(guān)的方法，全都定義在RegExp對(duì)象上。

String.prototype.match 調(diào)用 RegExp.prototype[Symbol.match]
String.prototype.replace 調(diào)用 RegExp.prototype[Symbol.replace]
String.prototype.search 調(diào)用 RegExp.prototype[Symbol.search]
String.prototype.split 調(diào)用 RegExp.prototype[Symbol.split]

3. u修飾符

ES6對(duì)正則表達(dá)式添加了u修飾符，含義為“Unicode模式”，用來(lái)正確處理大于\uFFFF的Unicode字符。

也就是說(shuō)，會(huì)正確處理四個(gè)字節(jié)的UTF-16編碼。對(duì)于碼點(diǎn)大于0xFFFF的Unicode字符，點(diǎn)字符不能識(shí)別，必須加上u修飾符。

ES6新增了使用大括號(hào)表示Unicode字符，這種表示法在正則表達(dá)式中必須加上u修飾符，才能識(shí)別。

/\u{61}/.test('a') // false
/\u{61}/u.test('a') // true
/\u{20BB7}/u.test('𠮷') // true

①.點(diǎn)字符

點(diǎn)（.）字符在正則表達(dá)式中，含義是除了換行符以外的任意單個(gè)字符。對(duì)于碼點(diǎn)大于0xFFFF的Unicode字符，點(diǎn)字符不能識(shí)別，必須加上u修飾符。

var s = '';
/^.$/.test(s) // false
/^.$/u.test(s) // true

上面代碼表示，如果不添加u修飾符，正則表達(dá)式就會(huì)認(rèn)為字符串為兩個(gè)字符，從而匹配失敗。

②. 量詞

使用u修飾符后，所有量詞都會(huì)正確識(shí)別碼點(diǎn)大于0xFFFF的Unicode字符。

/a{2}/.test('aa') // true
/a{2}/u.test('aa') // true
/ {2}/.test(' ') // false
/ {2}/u.test(' ') // true

另外，只有在使用u修飾符的情況下，Unicode表達(dá)式當(dāng)中的大括號(hào)才會(huì)被正確解讀，否則會(huì)被解讀為量詞。

/^\u{3}$/.test('uuu') // true

上面代碼中，由于正則表達(dá)式?jīng)]有u修飾符，所以大括號(hào)被解讀為量詞。加上u修飾符，就會(huì)被解讀為Unicode表達(dá)式。

③. 預(yù)定義模式

u修飾符也影響到預(yù)定義模式，能否正確識(shí)別碼點(diǎn)大于0xFFFF的Unicode字符。

\S是預(yù)定義模式，匹配所有不是空格的字符。只有加了u修飾符，它才能正確匹配碼點(diǎn)大于0xFFFF的Unicode字符。

利用這一點(diǎn)，可以寫(xiě)出一個(gè)正確返回字符串長(zhǎng)度的函數(shù)。

function codePointLength(text) {
 var result = text.match(/[\s\S]/gu);
 return result ? result.length : 0;
}
var s = '𠮷𠮷';
s.length // 4
codePointLength(s) // 2

④. i修飾符

有些Unicode字符的編碼不同，但是字型很相近，比如，\u004B與\u212A都是大寫(xiě)的K。

/[a-z]/i.test('\u212A') // false
/[a-z]/iu.test('\u212A') // true

上面代碼中，不加u修飾符，就無(wú)法識(shí)別非規(guī)范的K字符。

4. y修飾符

除了u修飾符，ES6還為正則表達(dá)式添加了y修飾符，叫做“粘連”（sticky）修飾符。

y修飾符的作用與g修飾符類似，也是全局匹配，后一次匹配都從上一次匹配成功的下一個(gè)位置開(kāi)始。

不同之處在于，g修飾符只要剩余位置中存在匹配就可，而y修飾符確保匹配必須從剩余的第一個(gè)位置開(kāi)始，這也就是“粘連”的涵義。

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

上面代碼有兩個(gè)正則表達(dá)式，一個(gè)使用g修飾符，另一個(gè)使用y修飾符。這兩個(gè)正則表達(dá)式各執(zhí)行了兩次，第一次執(zhí)行的時(shí)候，兩者行為相同，剩余字符串都是_aa_a。由于g修飾沒(méi)有位置要求，所以第二次執(zhí)行會(huì)返回結(jié)果，而y修飾符要求匹配必須從頭部開(kāi)始，所以返回null。

如果改一下正則表達(dá)式，保證每次都能頭部匹配，y修飾符就會(huì)返回結(jié)果了。

var s = 'aaa_aa_a';
var r = /a+_/y;
r.exec(s) // ["aaa_"]
r.exec(s) // ["aa_"]

上面代碼每次匹配，都是從剩余字符串的頭部開(kāi)始。

使用lastIndex屬性，可以更好地說(shuō)明y修飾符。

const REGEX = /a/g;
// 指定從2號(hào)位置（y）開(kāi)始匹配
REGEX.lastIndex = 2;
// 匹配成功
const match = REGEX.exec('xaya');
// 在3號(hào)位置匹配成功
match.index // 3
// 下一次匹配從4號(hào)位開(kāi)始
REGEX.lastIndex // 4
// 4號(hào)位開(kāi)始匹配失敗
REGEX.exec('xaxa') // null

上面代碼中，lastIndex屬性指定每次搜索的開(kāi)始位置，g修飾符從這個(gè)位置開(kāi)始向后搜索，直到發(fā)現(xiàn)匹配為止。

const REGEX = /a/y;
// 指定從2號(hào)位置開(kāi)始匹配
REGEX.lastIndex = 2;
// 不是粘連，匹配失敗
REGEX.exec('xaya') // null
// 指定從3號(hào)位置開(kāi)始匹配
REGEX.lastIndex = 3;
// 3號(hào)位置是粘連，匹配成功
const match = REGEX.exec('xaxa');
match.index // 3
REGEX.lastIndex // 4

y修飾符同樣遵守lastIndex屬性，但是要求必須在lastIndex指定的位置發(fā)現(xiàn)匹配。

進(jìn)一步說(shuō)，y修飾符號(hào)隱含了頭部匹配的標(biāo)志^。

/b/y.exec('aba')
// null

單單一個(gè)y修飾符對(duì)match方法，只能返回第一個(gè)匹配，必須與g修飾符聯(lián)用，才能返回所有匹配。

5. sticky屬性

表示是否設(shè)置了y修飾符

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

6. flags屬性

ES6為正則表達(dá)式新增了flags屬性，會(huì)返回正則表達(dá)式的修飾符。（和前面是一個(gè)逆向的過(guò)程）

7. RegExp.escape()

字符串必須轉(zhuǎn)義，才能作為正則模式。已經(jīng)有提議將這個(gè)需求標(biāo)準(zhǔn)化，作為RegExp對(duì)象的靜態(tài)方法RegExp.escape()

function escapeRegExp(str) {
 return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
}
let str = '/path/to/resource.html?search=query';
escapeRegExp(str)
// "\/path\/to\/resource\.html\?search=query"

PS：這里再為大家提供2款非常方便的正則表達(dá)式工具供大家參考使用：

JavaScript正則表達(dá)式在線測(cè)試工具：
http://tools.jb51.net/regex/javascript

正則表達(dá)式在線生成工具：
http://tools.jb51.net/regex/create_reg

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《ECMAScript6(ES6)入門(mén)教程》、《JavaScript正則表達(dá)式技巧大全》、《JavaScript字符與字符串操作技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

最新評(píng)論