Not learning ES6 well? ECMAScript 2018 has arrived!

  • ECMAScript Regular Expressions are Getting Better!
  • Mathias Bynens: Developer of the Google V8 engine
  • Translator: Fundebug

To ensure readability, free translation rather than literal translation is used in this paper. In addition, the copyright of this article belongs to the original author, and translation is for study only.

In 1999, ECMAScript 3 added support for regular expressions.

Sixteen years later, ECMAScript 6(i.e. ECMAScript 2015 or ES6) introduced Unicode mode (U option), sticky mode (Y option) and getter methods for RegExp. Prototype. flags.

This blog will introduce the latest features of ECMAScript regular expressions:

  • DotAll mode (S option)
  • Lookbehind assertion
  • Named capture groups
  • Unicode property escapes
  • String.prototype.matchAll
  • Specification RegExp legacy features

1. DotAll mode (s option)

This feature has been released in ECMAScript 2018.

By default,. Can match any character except newline:

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

In addition,. Does not match Unicode characters and requires the Unicode mode to be enabled using the U option.

ES2018 introduces dotAll mode, which can be enabled with the S option, thus,. You can match the newline character.

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

2. Lookbehind assertion

This feature has been released in ECMAScript 2018.

ECMAScript currently only supports lookahead assertions.

The following example is a Positive lookahead that matches the number of “dollars” immediately following the string “42 dollars” :

const pattern = /\d+(? = dollars)/u;
const result = pattern.exec('42 dollars');
console.log(result[0]); / / print 42
Copy the code

The following example is a Negative lookahead that matches the string “42 pesos” followed by a number other than “dollars” :

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

ES2018 adds the lookBehind assertion.

The following example is a Positive lookbehind that matches a number in the string “$42 “preceded by “$” :

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

The following is a Negative lookbehind that matches a string “$42 “that is not preceded by a “$” :

const pattern = / (? 
      ;
const result = pattern.exec('euro 42');
console.log(result[0]); / / print 42
Copy the code

FundebugReact Native, Node.js and Java live BUG monitoring

3. Named capture groups

This feature has been released in ECMAScript 2018.

Currently, groups of parenthesis matches in regular expressions are numbered by numbers:

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

This is convenient, but very unreadable and difficult to maintain. Whenever the order of parentheses changes in the regular expression, we need to update the corresponding numeric number.

ES2018 added named Capture Groups to allow you to specify the name of the matching content in the parentheses to improve code readability and maintenance.

const pattern = / (? 
      
       \d{4})-(? 
       
        \d{2})-(? 
        
         \d{2})/u
        
       
      ;
const result = pattern.exec('2017-01-25');
console.log(result.groups.year); / / print "2017"
console.log(result.groups.month); / / print "01"
console.log(result.groups.day); / / print "25"
Copy the code

4. Unicode property escapes

This feature has been released in ECMAScript 2018.

The Unicode standard assigns multiple attributes to each character. For example, when you want to match Greek characters, you can search for characters whose Script_Extensions attribute is Greek.

Unicode Property Escapes allows us to directly match properties of Unicode characters using ECMAScript regular expressions:

const regexGreekSymbol = /\p{Script_Extensions=Greek}/u;
console.log(regexGreekSymbol.test('PI.)); / / print true
Copy the code

5. String.prototype.matchAll

This feature is still in Stage 3 Draft

The g and y options are typically used to match a string and then iterate over all matched substrings, including the grouping of bracketing matches. String. The prototype. MatchAll make the operation more simple.

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);
}
Copy the code

The match object returned by each iteration is the same as the result returned by regx.exec (string) :

// 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'
]
Copy the code

Note that this feature is still in Stage 3 Draft, so change is possible, and the sample code is based on the latest proposal. Additionally, browsers do not yet support this feature. String. The prototype. Can be added to the fastest matchAll ECMAScript in 2019.

6. Standardize RegExp legacy features

The proposal is still in Stage 3 Draft

This proposal regulates the legacy features of RegExp, such as the regexp.prototype.pile method and its static properties ranging from RegExp.$1 to RegExp.$9. Although these features have been deprecated, we cannot remove them for compatibility. Therefore, regulating these RegExp legacy features is the best approach. This proposal therefore helps to ensure compatibility.

reference

  • Ruan Yifeng – Getting started with ECMAScript 6
  • Fundebug blog – JavaScript regular expression progression guide
  • ECMAScript 2018: the final feature set

About Fundebug

Fundebug focuses on JavaScript, wechat applets, wechat mini games, Alipay applets, React Native, Node.js and Java real-time BUG monitoring. Since its launch on November 11, 2016, Fundebug has handled more than 600 million error events in total, which has been recognized by many well-known users such as Google, 360 and Kingsoft software. Welcome free trial!

Copyright statement

Please indicate the author Fundebug and the address of this article:

Blog.fundebug.com/2018/08/30/…