ES6正则表达式扩展：u修饰符与y修饰符详解

ES6正则表达式构造函数变更

前言

正则表达式是JavaScript中处理字符串的核心工具之一。尽管在早期版本中变化不大，但随着ES6引入字符串操作的新特性，正则表达式也获得了一系列重要更新。本文将深入探讨ES6中正则表达式的扩展内容。

构造函数

在ES5规范中，RegExp构造函数的参数处理分为两种情况。

第一种情况是，当第一个参数为字符串时，第二个参数用于指定正则表达式的修饰符（flag）。

var regex = new RegExp('xyz', 'i');
// 等价于
var regex = /xyz/i;

第二种情况是，当第一个参数本身就是一个正则表达式对象时，构造函数会返回该正则表达式的一个副本。

var regex = new RegExp(/xyz/i);
// 等价于
var regex = /xyz/i;

然而，在ES5中，如果此时提供第二个参数来添加修饰符，将会抛出错误，不允许这样做。

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

ES6改变了这一行为限制。如果RegExp构造函数的第一个参数是正则对象，现在允许使用第二个参数来指定新的修饰符。需要注意的是，返回的新正则表达式将忽略原对象的修饰符，仅采用新指定的修饰符。

console.log(new RegExp(/abc/ig, 'i').flags);//i

在上述代码示例中，原有正则对象的修饰符为ig，但通过第二个参数指定为i后，最终结果仅保留i修饰符。

【flags属性】

ES6为正则表达式对象新增了flags属性，用于直接返回正则表达式的修饰符字符串。

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

正则方法

字符串对象提供了四个可以使用正则表达式的方法：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]

u修饰符：Unicode模式详解

u修饰符

正则表达式通常用于简单的字符串操作，但默认情况下，它将字符串中的每个字符视为16位编码进行处理。为了解决这一问题，ES6引入了u修饰符，其含义为“Unicode模式”，旨在正确处理大于\uFFFF的Unicode字符，即能够正确解析四个字节的UTF-16编码。

/^\uD83D/u.test('\uD83D\uDC2A') // false
/^\uD83D/.test('\uD83D\uDC2A') // true

一旦为正则表达式设置了u修饰符，系统将把32位的辅助平面字符识别为单个字符，而不是拆分为两个字符。

【点号】

在正则表达式中，点（.）字符通常匹配除换行符以外的任意单个字符。对于码位大于0xFFFF的Unicode字符，点字符默认无法识别，必须添加u修饰符才能正确匹配。

var text = "𠮷" ;
console.log(text.length); // 2
console.log(/^.$/.test(text));//false
console.log(/^.$/u.test(text)); //true

【大括号】

ES6新增了一种使用大括号表示Unicode字符的语法。在正则表达式中，必须添加u修饰符才能识别这种大括号表示法，否则大括号会被错误地解读为量词。

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

【量词】

使用u修饰符后，所有的量词都能正确识别码位大于0xFFFF的Unicode字符。

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

【预定义模式】

u修饰符还会影响预定义模式（如\w、\s等），决定其能否正确识别码位大于0xFFFF的Unicode字符。

/^\S$/.test('𠮷') // false
/^\S$/u.test('𠮷') // true

【字符串长度】

上述代码中的\S是预定义模式，用于匹配所有非空格字符。只有添加u修饰符，它才能正确匹配码位大于0xFFFF的Unicode字符。

虽然ES6中字符串的length属性仍返回编码单元的数量，不支持直接检测码位数量，但利用[\s\S]结合u修饰符，可以编写出一个正确返回字符串实际长度（码位数）的函数。

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

【检测支持】

u修饰符属于语法层面的变更，如果在不支持ES6的JavaScript引擎中尝试使用，会直接抛出语法错误。若要安全地检测当前引擎是否支持u修饰符，可以通过以下函数进行判断。

function hasRegExpU() {
  try {
    var pattern = new RegExp(".", "u");
    return true;
  } catch (ex) {
    return false;
  }
}

该函数利用RegExp构造函数并传入字符串'u'作为参数。这种语法在旧版JavaScript引擎中也是有效的，但如果当前引擎不支持u修饰符，则会抛出错误。

y修饰符：粘性匹配机制

y修饰符

除了u修饰符，ES6还为正则表达式引入了y修饰符，称为“粘性”（sticky）修饰符。

y修饰符的作用与g修饰符类似，都进行全局匹配，且后续匹配从上一次匹配成功的位置之后开始。不同之处在于，g修饰符只要剩余字符串中存在匹配即可返回结果，而y修饰符要求匹配必须从剩余字符串的第一个位置（即头部）开始，这体现了“粘性”的含义。

【全局匹配】

y修饰符的设计初衷之一，是确保头部匹配标志^在全局匹配中始终有效。

var s = 'aaa_aa_a';
var r1 = /a+/g;
var r2 = /a+/y;
console.log(r1.exec(s)); // ["aaa"]
console.log(r2.exec(s)); // ["aaa"]
console.log(r1.exec(s)); // ["aa"]
console.log(r2.exec(s)); // null

上述代码展示了两个正则表达式，分别使用g修饰符和y修饰符。两者执行两次时，第一次行为相同，剩余字符串均为_aa_a。由于g修饰符没有位置限制，第二次执行会返回结果；而y修饰符要求匹配必须从头部开始，因此第二次执行返回null。

如果调整正则表达式，确保每次匹配都能从头部开始，y修饰符就能返回结果。

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

上述代码中，每次匹配均从剩余字符串的头部开始进行。

【非全局匹配】

单独使用y修饰符调用match方法时，只能返回第一个匹配结果；必须与g修饰符联用，才能返回所有匹配结果。

'a1a2a3'.match(/a\d/y) // ["a1"]
'a1a2a3'.match(/a\d/gy) // ["a1", "a2", "a3"]

[注意]y修饰符仅在调用exec()和test()这两个正则匹配方法时进行全局匹配；如果调用match()、replace()等字符串方法时，不会进行全局匹配。

【sticky属性】

与y修饰符相对应，ES6的正则对象新增了sticky属性，用于表示是否设置了y修饰符。

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

【应用】

y修饰符的一个典型应用场景是从字符串中提取token（词元）。y修饰符确保了匹配之间不会漏掉任何字符。

const TOKEN_Y = /\s*(\+|[0-9]+)\s*/y;
const TOKEN_G = /\s*(\+|[0-9]+)\s*/g;
tokenize(TOKEN_Y, '3 + 4')// [ '3', '+', '4' ]
tokenize(TOKEN_G, '3 + 4')// [ '3', '+', '4' ]
function tokenize(TOKEN_REGEX, str) {
 let result = [];
 let match;
 while (match = TOKEN_REGEX.exec(str)) {
  result.push(match[1]);
 }
 return result;
}

在上述代码中，如果字符串中没有非法字符，y修饰符与g修饰符的提取结果相同。然而，一旦出现非法字符，两者的行为就会产生差异。

tokenize(TOKEN_Y, '3x + 4')
// [ '3' ]
tokenize(TOKEN_G, '3x + 4')
// [ '3', '+', '4' ]

在上述代码中，g修饰符会忽略非法字符继续匹配，而y修饰符遇到非法字符会停止，从而更容易发现错误。

【检测支持】

与u修饰符类似，y修饰符也是语法层面的变更，在不兼容ES6的JavaScript引擎中使用会抛出语法错误。若要检测当前引擎是否支持y修饰符，可以通过以下函数进行检测。

function hasRegExpY() {
  try {
    var pattern = new RegExp(".", "y");
    return true;
  } catch (ex) {
    return false;
  }
}

该函数利用RegExp构造函数并传入字符串'y'作为参数。这种语法在旧版JavaScript引擎中有效，但如果当前引擎不支持y修饰符，则会抛出错误。

总结

以上介绍了ES6正则表达式的扩展内容，希望有所帮助。如有任何疑问，请留言，小编会及时回复。

在此也非常感谢大家对本站网站的支持！