Shulou(Shulou.com)06/02 Report--

This article focuses on "the use of ES6 strings and regular expressions". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn the use of ES6 strings and regular expressions.

String

1. Better Unicode support

Unicode is a character set. All the characters in the world are included in a collection, and as long as the computer supports this character set, it can display all the characters and there will be no more garbled codes.

Before es6, js strings were built based on 16-bit character encoding. Every 16-bit sequence is an encoding unit that represents a character. Unicode0 introduces an extended character set, and the 16-bit character encoding will no longer contain any characters. The coding rules are changed as a result.

For UTF-16, a code point can be represented by multiple encoding units, indicating that it is not a component.

For the encoding unit representation in which the first 2 ^ 16 code points of UTF-16 are all 16 bits, this range is called basic multilingual plane BMP. When exceeded, a proxy pair is introduced, stipulating that one code point, that is, 32-bit auxiliary plane characters, is represented by two 16-bit coding units. A 32-bit proxy pair represents a character length of 1, but the value of the length attribute is 2. 0.

If you want to know more about him, you can refer to a log of Ruan Yifeng: www.ruanyifeng.com/blog/2014/1. The code point mentioned in the log is the code point.

1.1codePointAt (0) method

Before es6, the charCodeAt () method returns the corresponding value of each 16-bit encoding unit of the character, and then adds the codePointAt method to the es6. CodePointAt (0) returns the code point at position 0 or the code point at position 0, and contains multiple encoding units > hexadecimal upper bound FFFF,charCodeAt (0) returns the first encoding unit of position 0.

Therefore, this method can be used to determine the number of coding units occupied by a character.

Function is32Bit (c) {return c.codePointAt (0) > 0xFFF;} console.log (is32Bit (Geely)); / / trueconsole.log (is32Bit ("a")); / / false

1.2 String.fromCodePoint () method

The codePointAt () method retrieves the code point of a string in a string, or you can use the String.fromCodePoint () method to generate a word based on the specified code point.

Console.log (String.fromCodePoint (134071)); / / Kyrgyzstan

1.3normalize () method

Equivalence may occur when comparing characters or sorting, but there are two cases of equivalence.

The equivalence of the specification is that no matter from which point of view, there is no difference between the code points of the two sequences.

Compatible code point sequences look different, but can be used interchangeably under certain circumstances. But it is not equivalent in strict mode, unless the equivalent relationship is standardized in some way.

The normalize () method provides a standardized form of Unicode, which accepts an optional string parameter. There are four standardized forms of Unicode

Decompose in standard equivalence, then reassemble in standard equivalence ("NFC"), default option

Decompose in a standard equivalent manner ("NFD")

Decompose in a compatible and equivalent manner ("NFKC")

Decompose in a compatible manner and then reorganize in a standard equivalent manner

1.4 regular expression u modifier

Adding a u modifier after the regular expression switches the encoding unit mode to character mode, at which time the proxy pair is not considered two characters.

But the length property still returns the number of string encoding units, not the number of code points. But you can also solve this problem with regular expressions with u modifiers.

Function codePointerLength (text) {let result = text.match (/ [\ s\ S] / gu); return result? Result.length:0;} console.log (codePointerLength ("Jiabc")); / / 4

Detect whether the u modifier is supported

The use of the u modifier in an ES6-incompatible JavaScript engine can cause syntax errors, which can be detected by the following function.

Function hasRegExpU () {try {var pattern = new Regexp (".", "u"); return ture;} catch (ex) {return false;}}

two。 Changes to other strings

2.1 string recognition in string

Developers use the indexOf () method to detect one substring in another. Provide three methods in es6 to achieve similar results

The startWith () method, which detects the specified text at the beginning of the string and returns true, otherwise returns false.

The incledes () method returns true if the specified text is detected in the string, otherwise it returns false.

The endWith () method, which is detected at the end as its name implies, is the same as above.

The above three methods accept two parameters, the first of which specifies that the text to be searched is one character. The second is that the index value of the start search location is a number. The second parameter, endwith, is not specified. The match usually starts at the end of the string. The demonstration is as follows

Let mes = "hello world"; console.log (mes.startWith ("hello")); console.log (mes.endWith ("!")); console.log (mes.includes ("o")); console.log (mes.startWith ("o")); console.log (mes.endWith ("d!")); console.log (mes.includes ("x")); console.log (mes.startWith ("o", 4)); console.log (mes.endWith ("o", 8)) Console.log (mes.includes ("o", 8)); / 9 results are: true true true false true false true true falseconsole.log (mes.endWith ("o", 8)); match starts with the second o in bit 7. Index value-length of text to search for = 8-1

2.2 repeat () method

Es6 is a newly added repeat () method for a string, which takes a parameter of type number and returns a new string that repeats that number of times.

Console.log (x.repeat (3)); / / "xxx"

I'm the two dividing lines, quack.

Regular expression

1. Changes to other regular expressions

1.1 regular expression y modifier

The y modifier sticks to the regular expression, starting with the lastIndex attribute of the regular expression. If the specified location does not match successfully, the match will be stopped and the result will be returned.

Let text = 'hello1 hello2 hello3';let patt = / hello\ d\ s accountant, result = patt.exec (text); let gPatt = / helllo\ d\ s accounta g, gResult = gPatt.exec (text); let yPatt = / hello\ d\ s accounta y, yResult = yPatt.exec (text); console.log (resut [0]); / / "hello1" console.log (gResut [0]); / / "hello1" console.log (yResut [0]); / / "hello1" patt.lastIndex = 1 GPatt.lastIndex = 1dexyPatt.lastIndex = 1X result = patt.exec (text); gResult = gPatt.exec (text); yResult = yPatt.exec (text); console.log (resut [0]); / / "hello1" console.log (gResut [0]); / / "hello2" console.log (yResut [0]); / / throw error

Of the three regular expressions here, the first has no modifier, the second global modifier g, and the third uses the y modifier.

The first match starts with the h character. When lastIndex = 1;, this change is automatically ignored for expressions without modifiers, the result is still hello1, the g modifier will match from the e character, output hello2, yResul will start from the e character, ello h will match with it, and the final result will be null, so an error will be thrown.

When the y modifier is executed, the last index value of the last matching character is saved in the lastIndex, and if the y modifier matching result is empty, the lastIndex value is reset to the same as this.

The lastIndex property is designed only when the exec () and test () methods of the regular expression object are called. For example, the method natch () that calls the string does not trigger stickiness.

The sticky attribute can be used to detect the existence of the y modifier. If the js engine supports the sticky modifier, the value of the stickey property is true, otherwise it is false.

Let patt = / hello\ dUniverse console.log (patt.sticky)

1.2 replication of regular expressions

In es5, you can copy the regular expression by passing the regular expression as an argument to the constructor of the regular expression. But the fact is that the second parameter cannot be used when the first parameter is a regular expression. This behavior has been modified in es6, and the second parameter can be a modifier.

Let re1 = / ab/i;let re2 = new RegExp (re1, "g"); console.log (re1.toString ()); / "/ ab/i" console.log (re2.toString ()); / / "/ ab/g"

1.3flags attribute

The new flags property of es6 returns all modifiers applied to the current regular expression

Let re = / ab/g;console.log (re.source); / / "ab" console.log (re.flags); / / "g"

two。 Template literal quantity

2.1 basic Grammar

In a word, reverse apostrophe (`) is used instead of double quotation marks and single quotation marks.

If you want to use a backapostrophe in a string, you can escape it with\. Such as

Let message = `\ `hello\`! `; console.log (message)

It turned out to be hello!

2.2 simplified multiline string

Before es6, multiple lines of strings were created by array or string concatenation. In es6, you only need to wrap lines directly in the code, and the line breaks also change the value of the length attribute. At the same time, all spaces in the backapostrophe are part of the string.

Let message = `Multilinestring`; console.log (message); console.log (message.length); / / 16, 6, 9, 1

2.3 string placeholder

In a template literal, you can embed any legal JavaScript expression in a placeholder and output it to the result as part of a string.

Placeholders usually consist of ${} and can contain any JavaScript expression in the middle. The template literal is itself a JavaScript expression, so you can embed another template literal within one template literal.

Let name = "sarah"; let message = `my$ {`name is$ {name} .`} `; console.log (message); / / my name is sarah.

Message is a template literal, which also contains name is$ {name}. This template is literal.

At this point, I believe you have a deeper understanding of "the use of ES6 strings and regular expressions". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.