1. Введение

Статьи, которые я прочитал на этой неделе,regexp-features-regular-expressions.

В этой статье представлены несколько важных особенностей регулярной поддержки ES2018:

• Утверждения Lookbehind - Утверждения Lookbehind
• Именованные группы захвата — Именованные группы захвата
• Флаг s (dotAll) — соответствует любому символу
• Экранирование свойства Unicode - Экранирование свойства Unicode

2. Обзор

Вы все еще используете индексы для соответствия содержанию? соответствует только любому символу[\w\W]? Теперь, когда существует более упрощенный способ написания регулярных выражений, на самом деле регулярные выражения становятся проще в использовании.Пришло время обновить понимание регулярных выражений.

2.1. Lookbehind assertions

Полное определение утверждения делится на: декартово произведение, сочетание положительного/отрицательного утверждения и пре-/пост-утверждения.До ES2018 поддерживалось только предварительное утверждение, а теперь, наконец, поддерживается пост-предикат.

Объясните четыре утверждения:

положительное прогнозное утверждение (?=...)выражатьПозжеНитьможет соответствоватьшаблон.

const re = /Item(?= 10)/;

console.log(re.exec("Item"));
// → null

console.log(re.exec("Item5"));
// → null

console.log(re.exec("Item 5"));
// → null

console.log(re.exec("Item 10"));
// → ["Item", index: 0, input: "Item 10", groups: undefined]

отрицательное предварительное утверждение (?!...)выражатьПозжеНитьне может соответствоватьшаблон.

const re = /Red(?!head)/;

console.log(re.exec("Redhead"));
// → null

console.log(re.exec("Redberry"));
// → ["Red", index: 0, input: "Redberry", groups: undefined]

console.log(re.exec("Redjay"));
// → ["Red", index: 0, input: "Redjay", groups: undefined]

console.log(re.exec("Red"));
// → ["Red", index: 0, input: "Red", groups: undefined]

После ES2018 поддерживаются два новых метода утверждения:

Переслать претерпее утверждение (?<=...)выражатьДоНитьможет соответствоватьшаблон.

При размещении первой строки нить помещается спереди, а рисунок размещается сзади; при размещении последней строки нить размещается сзади, а узор помещается спереди. Чем заканчивается упреждающее совпадение и с чего начинается совпадение второй линии.

const re = /(?<=€)\d+(\.\d*)?/;

console.log(re.exec("199"));
// → null

console.log(re.exec("$199"));
// → null

console.log(re.exec("€199"));
// → ["199", undefined, index: 1, input: "€199", groups: undefined]

отрицательное ретроспективное утверждение (?<!...)выражатьДоНитьне может соответствоватьшаблон.

Примечание. В следующем примере показаны метрыДо не может соответствоватьтри числа.

const re = /(?<!\d{3}) meters/;

console.log(re.exec("10 meters"));
// → [" meters", index: 2, input: "10 meters", groups: undefined]

console.log(re.exec("100 meters"));
// → null

В статье приводится немного более сложный пример, который сочетает в себе положительное утверждение просмотра назад и отрицательное утверждение просмотра назад:

Примечание. В следующем примере показаны метрыДо может соответствоватьдва числа,а также До не может соответствовать№ 35.

const re = /(?<=\d{2})(?<!35) meters/;

console.log(re.exec("35 meters"));
// → null

console.log(re.exec("meters"));
// → null

console.log(re.exec("4 meters"));
// → null

console.log(re.exec("14 meters"));
// → ["meters", index: 2, input: "14 meters", groups: undefined]

2.2. Named Capture Groups

Именованные группы захвата дают имена обычным захватам, которые более удобочитаемы, чем индексы.

Его синтаксис?<name>:

const re = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
const [match, year, month, day] = re.exec("2020-03-04");

console.log(match); // → 2020-03-04
console.log(year); // → 2020
console.log(month); // → 03
console.log(day); // → 04

Вы также можете использовать индексы в регулярных выражениях.\1Используйте предыдущую группу захвата напрямую, например:

объяснять,\1представлять(\w\w)соответствующий контент вместо(\w\w)себя, поэтому, когда(\w\w)совпало'ab'назад,\1значит правильно'ab'соответствовать.

console.log(/(\w\w)\1/.test("abab")); // → true

// if the last two letters are not the same
// as the first two, the match will fail
console.log(/(\w\w)\1/.test("abcd")); // → false

Для именованных групп захвата вы можете передать\k<name>синтаксис для доступа без необходимости прохождения\1Этот индекс:

Подписка и именование могут использоваться вместе.

const re = /\b(?<dup>\w+)\s+\k<dup>\b/;

const match = re.exec("I'm not lazy, I'm on on energy saving mode");

console.log(match.index); // → 18
console.log(match[0]); // → on on

2.3. s (dotAll) Flag

Хотя обычный.Соответствует любому символу, но не символу новой строки. Поэтому умные разработчики используют[\w\W]Хитро решил эту проблему.

Однако, в конце концов, это конструктивный недостаток, поддерживаемый в ES2018./sрежим, в этом режиме,.Эквивалентно[\w\W]:

console.log(/./s.test("\n")); // → true
console.log(/./s.test("\r")); // → true

2.4. Unicode Property Escapes

Регулярная поддержка более мощного сопоставления Unicode. существует/uрежим, вы можете использовать\p{Number}Совпадение всех чисел:

Модификатор u распознает все символы Юникода больше 0xFFFF.

const regex = /^\p{Number}+$/u;
regex.test("²³¹¼½¾"); // true
regex.test("㉛㉜㉝"); // true
regex.test("ⅠⅡⅢⅣⅤⅥⅦⅧⅨⅩⅪⅫ"); // true

\p{Alphabetic}Может соответствовать всем элементам алфавита, включая китайские иероглифы, буквы и т. д.:

const str = "漢";

console.log(/\p{Alphabetic}/u.test(str)); // → true

// the \w shorthand cannot match 漢
console.log(/\w/u.test(str)); // → false

Наконец, есть простой способ сопоставить китайские иероглифы.

2.5 Таблица совместимости

может прибытьоригинальныйГлядя на таблицу совместимости, в целом поддерживаются только Chrome и Safari, Firefox и Edge не поддерживаются. Так что использование крупных проектов займет еще несколько лет.

3. Интенсивное чтение

Четыре новые функции, перечисленные в статье, добавлены в стандартную версию ES2018. Однако, как показано в таблице совместимости, эти функции в основном недоступны, поэтому давайте рассмотрим улучшения регуляризации в ES6 и найдем комбинацию с обычными изменениями в ES2018.

3.1 Оптимизация конструктора RegExp

Когда первый параметр конструктора RegExp является регулярным выражением, допускается указывать второй параметр — модификатор (ES5 сообщит об ошибке):

new RegExp(/book(?=s)/giu, "iu");

Безболезненная оптимизация, в конце концов, большую часть времени конструкторы этого не делают.

3.2 Регулярные методы для строк

преобразовать строкуmatch(),replace(),search,splitКогда метод вызывается внутри, он указывает на метод экземпляра RegExp, например

String.prototype.matchнаправлениеRegExp.prototype[Symbol.match].

То есть регулярное выражение должно срабатывать от регулярного экземпляра, но теперь оно поддерживает прямой вызов строки (удобно). Но выполнение на самом деле указывает на обычный объект экземпляра, что делает логику более унифицированной.

Например:

"abc".match(/abc/g) /
  // 内部执行时，等价于
  abc /
  g[Symbol.match]("abc");

3.3 Модификатор u

В обзоре экранирование свойств Unicode является усовершенствованием модификатора u, аuМодификаторы были добавлены в ES6.

uМодификатор означает «режим Unicode» и используется для правильной обработки более\uFFFFсимволы Юникода.

в то же времяuМодификатор также изменяет поведение следующих регулярных выражений:

• Символ точки изначально поддерживал одиночные символы, но вuрежим, может соответствовать больше, чем0xFFFFсимволы Юникода.
• Буду\u{61}Значение при сопоставлении 61uАдаптировано для соответствия буквам, закодированным как номер 61 Unicode.a.
• Сопоставление квантификатора, которое правильно распознает не односимвольные символы Unicode.
• \SСимволы Unicode распознаются правильно.
• uРежим,[a-z]Он также может распознавать буквы с разными кодировками Unicode, но очень близкими шрифтами, такими как\u212Aдругое представлениеK.

В основном, вuВ режиме модификатора все символы Unicode могут интерпретироваться правильно, а в ES2018 некоторые новыеuСоответствующий набор шаблонов для соответствия некоторым общим символам, таким как\p{Number}соответствовать¼.

3.4 Модификатор y

yМодификатор является «липким» модификатором.

yаналогичныйgВсе модификаторы являются глобальными сопоставлениями, то есть, начиная с последней удачной позиции сопоставления, продолжают сопоставление.yРазница в том, что следующая позиция после успешного совпадения предыдущего должна быть сопоставлена ​​немедленно, чтобы считаться успешной.

Например:

/a+/g.exec("aaa_aa_a"); // ["aaa"]

3.5. flags

пройти черезflagsАтрибуты получают модификаторы:

const regex = /[a-z]*/gu;

regex.flags; // 'gu'

4. Резюме

Интенсивное чтение на этой неделеregexp-features-regular-expressionsВ этой статье я разбираюсь в новых обычных функциях, добавленных ES2018, и разбираюсь в регулярных улучшениях, сделанных ES6.

Если вы хорошо разбираетесь в этом методе рассеянного обучения, вы можете дополнительно ознакомиться с новыми функциями, представленными в ES6.Автор настоятельно рекомендует работу г-на Руана Ифэна.Начало работы с ECMAScript 6Эта книга.

Функции, представленные в ES2018, все еще слишком новы, и вы должны так же хорошо использовать функции ES6, как и ES3.

Если ваш друг все еще удивляется возможностям ES6, поделитесь с ним этой статьей, чтобы он не превратился в «новичка с JS только с проектным опытом».

Адрес обсуждения:Интенсивное чтение "Обычный ES2018" · Выпуск №127 · dt-fe/weekly

Если вы хотите принять участие в обсуждении, пожалуйста,кликните сюда, с новыми темами каждую неделю, выходящими по выходным или понедельникам. Интерфейс интенсивного чтения — поможет вам отфильтровать надежный контент.