ES6学习笔记（四）

补充学习一下 ES6 正则扩展 方面的知识，包含以下内容：
1、ES6 认可了构造函数的一种带修饰符参数的特殊写法；
2、在字符串的四个正则方法内调用正则对象的实例方法，使得正则方法与RegExp对象绑定；
3、u、y、s修饰符的引入；
4、后行断言；
5、新增具名组匹配，并可以通过 \k<组名> 的写法去引用具名组；
6、正则匹配索引的提案，通过indices属性获取每个组匹配的开始位置和结束位置；
7、ES2020 增加了String.prototype.matchAll()方法，返回一个遍历器（Iterator），可以一次性取出所有匹配。

ES6

正则的扩展

构造函数

在ES5中是不允许这样使用参数的：

var regex = new RegExp(/xyz/, 'i');
// Uncaught TypeError: Cannot supply flags when constructing one RegExp from another

但ES6认可了这种写法，而且，第二个参数指定的修饰符将会忽略第一个参数所指定的修饰符，像下面这样：

new RegExp(/abc/ig, 'i').flags
// "i"

正则方法

字符串对象共有 4 个方法，可以使用正则表达式：match()、replace()、search()和split()。
ES6 使得这 4 个方法，在语言内部全部调用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]

u 修饰符

ES6 对正则表达式添加了u修饰符，含义为“Unicode 模式”，用来正确处理大于\uFFFF的 Unicode 字符。也就是说，会正确处理四个字节的 UTF-16 编码。

// ^ 是限定开头的意思
/^\uD83D/u.test('\uD83D\uDC2A'); // false
/^\uD83D/.test('\uD83D\uDC2A'); // true

RegExp.prototype.unicode 属性

正则实例对象新增unicode属性，表示是否设置了u修饰符。

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

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

y 修饰符

除了u修饰符，ES6 还为正则表达式添加了y修饰符，叫做“粘连”（sticky）修饰符。
y修饰符的作用与g修饰符类似，也是全局匹配，后一次匹配都从上一次匹配成功的下一个位置开始。不同之处在于，g修饰符只要剩余位置中存在匹配就可，而y修饰符确保匹配必须从剩余的第一个位置开始，这也就是“粘连”的涵义。

简单地说，y修饰符限定下次匹配从头部开始匹配，匹配不到则返回null。实际上，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

RegExp.prototype.sticky 属性

与y修饰符相匹配，ES6 的正则实例对象多了sticky属性，表示是否设置了y修饰符。

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

RegExp.prototype.flags 属性

ES6 为正则表达式新增了flags属性，会返回正则表达式的修饰符。配合source属性可以获取正则表达式字面量的两部分。

// ES5 的 source 属性
// 返回正则表达式的正文
/abc/ig.source
// "abc"

// ES6 的 flags 属性
// 返回正则表达式的修饰符
/abc/ig.flags
// 'gi'

s 修饰符：dotAll 模式

正则表达式中，点（.）是一个特殊字符，代表任意的单个字符，但是有两个例外。一个是四个字节的 UTF-16 字符，这个可以用u修饰符解决；另一个是行终止符（line terminator character）。
所谓行终止符，就是该字符表示一行的终结。以下四个字符属于“行终止符”。

U+000A 换行符（\n）
U+000D 回车符（\r）
U+2028 行分隔符（line separator）
U+2029 段分隔符（paragraph separator）

ES2018 引入s修饰符，使得.可以匹配任意单个字符。

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

这被称为dotAll模式，即点（dot）代表一切字符。所以，正则表达式还引入了一个dotAll属性，返回一个布尔值，表示该正则表达式是否处在dotAll模式。

const re = /foo.bar/s;
// 另一种写法
// const re = new RegExp('foo.bar', 's');

re.test('foo\nbar'); // true
re.dotAll // true
re.flags // 's'

后行断言

“先行断言”指的是，x只有在y前面才匹配，必须写成/x(?=y)/。
“先行否定断言”指的是，x只有不在y前面才匹配，必须写成/x(?!y)/。

/\d+(?=%)/.exec('100% of US presidents have been male');  // ["100"]
/\d+(?!%)/.exec('that’s all 44 of them');                 // ["44"]

“后行断言”正好与“先行断言”相反，x只有在y后面才匹配，必须写成/(?<=y)x/。
“后行否定断言”则与“先行否定断言”相反，x只有不在y后面才匹配，必须写成/(?<!y)x/。

/(?<=\$)\d+/.exec('Benjamin Franklin is on the $100 bill');  // ["100"]
/(?<!\$)\d+/.exec('it’s is worth about €90');                // ["90"]

“后行断言”的实现，需要先匹配/(?<=y)x/的x，然后再回到左边，匹配y的部分。这种“先右后左”的执行顺序，与所有其他正则操作相反，导致了一些不符合预期的行为。
比如说组匹配，与正常情况下的结果是不一样的：

/(?<=(\d+)(\d+))$/.exec('1053'); // ["", "1", "053"]
/^(\d+)(\d+)$/.exec('1053'); // ["1053", "105", "3"]

上面代码中，需要捕捉两个组匹配。没有“后行断言”时，第一个括号是贪婪模式，第二个括号只能捕获一个字符，所以结果是105和3。而“后行断言”时，由于执行顺序是从右到左，第二个括号是贪婪模式，第一个括号只能捕获一个字符，所以结果是1和053。

具名组匹配

ES2018 引入了具名组匹配（Named Capture Groups），允许为每一个组匹配指定一个名字，既便于阅读代码，又便于引用。

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

如果具名组没有匹配，那么对应的groups对象属性会是undefined。

解构赋值和替换

解构赋值

有了具名组匹配以后，可以使用解构赋值直接从匹配结果上为变量赋值。

let {groups: {one, two}} = /^(?<one>.*):(?<two>.*)$/u.exec('foo:bar');
one  // foo
two  // bar

替换

字符串替换时，使用$<组名>引用具名组。

let re = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/u;

'2015-01-02'.replace(re, '$<day>/$<month>/$<year>')
// '02/01/2015'

replace方法的第二个参数也可以是函数，该函数的参数序列如下。

'2015-01-02'.replace(re, (
   matched, // 整个匹配结果 2015-01-02
   capture1, // 第一个组匹配 2015
   capture2, // 第二个组匹配 01
   capture3, // 第三个组匹配 02
   position, // 匹配开始的位置 0
   S, // 原字符串 2015-01-02
   groups // 具名组构成的一个对象 {year, month, day}
 ) => {
 let {day, month, year} = groups;
 return `${day}/${month}/${year}`;
});

具名组匹配在原来的基础上，新增了最后一个函数参数：具名组构成的一个对象。函数内部可以直接对这个对象进行解构赋值。

引用

如果要在正则表达式内部引用某个“具名组匹配”，可以使用\k<组名>的写法。

const RE_TWICE = /^(?<word>[a-z]+)!\k<word>$/;
RE_TWICE.test('abc!abc') // true
RE_TWICE.test('abc!ab') // false

数字引用（\1）依然有效，重复正则第一个圆括号内匹配到的内容。

const RE_TWICE = /^(?<word>[a-z]+)!\1$/;
RE_TWICE.test('abc!abc') // true
RE_TWICE.test('abc!ab') // false

这两种引用语法还可以同时使用，下面的代码引用了两次组名为word的具名组。

const RE_TWICE = /^(?<word>[a-z]+)!\k<word>!\1$/;
RE_TWICE.test('abc!abc!abc') // true
RE_TWICE.test('abc!abc!ab') // false

正则匹配索引

正则匹配结果的开始位置和结束位置，目前获取并不是很方便。正则实例的exec()方法，返回结果有一个index属性，可以获取整个匹配结果的开始位置，但是如果包含组匹配，每个组匹配的开始位置，很难拿到。

现在有一个第三阶段提案，为exec()方法的返回结果加上indices属性，在这个属性上面可以拿到匹配的开始位置和结束位置。

const text = 'zabbcdef';
const re = /ab/;
const result = re.exec(text);

result.index // 1
result.indices // [ [1, 3] ] ，ab的索引分别是1,2，结束位置为3

注意，开始位置包含在匹配结果之中，但是结束位置不包含在匹配结果之中。比如，匹配结果为ab，分别是原始字符串的第1位和第2位，那么结束位置就是第3位。

如果正则表达式包含组匹配，那么indices属性对应的数组就会包含多个成员，提供每个组匹配的开始位置和结束位置。

const text = 'zabbcdef';
const re = /ab+(cd(ef))/;
const result = re.exec(text);

result.indices // [ [1, 8], [4, 8], [6, 8] ]

如果正则表达式包含具名组匹配，indices属性数组还会有一个groups属性。该属性是一个对象，可以从该对象获取具名组匹配的开始位置和结束位置（不一定是排序的，所以通过键名去获取）。

const text = 'zabbcdef';
const re = /ab+(?<Z>cd)/;
const result = re.exec(text);

result.indices.groups // { Z: [ 4, 6 ] }

如果获取组匹配不成功，indices属性数组的对应成员则为undefined，indices.groups属性对象的对应成员也是undefined。

const text = 'zabbcdef';
const re = /ab+(?<Z>ce)?/;
const result = re.exec(text);

result.indices[1] // undefined
result.indices.groups['Z'] // undefined

String.prototype.matchAll()

这个方法在上一篇笔记提到过，参见：
ES6学习笔记（三）：字符串实例方法 matchAll()

完

如果对你产生了帮助，请点个赞给我吧！感谢观看！