1. Unicode representation of characters

A character is allowed in Javascript in the form \uxxxx, where XXXX represents the Unicode code point of the character. The following

"\u0061"
Copy the code

The range of this representation is between 0000 and FFFF, and beyond that, the representation is double-byte

"\u20BB7\uDFB1"
Copy the code

In ES6, changes have been made to the way strings are written. Put the code point in braces to read the character correctly, as follows:

20 bb7 "\ u {}" / /Copy the code

2. codePointAt()

Inside Javascript, characters are stored in UTF-16 format, and each character is fixed at 2 bytes. For characters that require four bytes of storage, JavaScript treats them as two characters. As follows:

Var s = "j" s.langth // 2 s.charat (0) // "s.charcodeat (1) //" s.charcodeat (0) // 55362 s.charcodeat (1) // 57271Copy the code

The characters in the above code need 4 bytes of storage, but JavaScript can’t handle it correctly, the string length is mistaken as 2, and the charAt method can’t read characters. CharCodeAt can only return the first two bytes and the last two bytes. ES6 provides codePointAt methods that can correctly handle 4-byte stored characters and return a character code point as follows:

Let s = 'j'; s.codePointAt(0) // 134071 s.codePointAt(1) // 57271Copy the code

The codePointAt() method is the easiest way to test whether a character consists of two bytes or four bytes

3. String.fromCodePoint()

ES5 provides the string.fromCharcode method to return corresponding characters from codepoints, but does not recognize 32-bit UTR-16 characters, and ES6 provides the ring.fromCodePoint() method to recognize characters larger than 32 bits. If there are multiple parameters, they are merged. As follows:

String.fromCodePoint(0x20BB7) // "𠮷" string. fromCodePoint(0x78, 0x1F680, 0x79) === 'x\uD83D\uDE80y' // trueCopy the code

Note: The fromCodePoint method is defined on String objects, while the codePointAt method is defined on String instances

4. String traverser interface

ES6 adds a traverser interface for strings, which can be traversed for of

5. normalize()

Used to unify different representations of characters into the same form,

6. includes(), startsWith(), endsWith()

Traditionally, JavaScript has only had the indexOf method, which can be used to determine whether one string is contained within another. ES6 offers three new approaches.

Includes () : Returns a Boolean value indicating whether the parameter string was found. StartsWith () : Returns a Boolean value indicating whether the argument string is at the head of the original string. EndsWith () : Returns a Boolean value indicating whether the argument string is at the end of the original string.Copy the code

7. repeat()

Returns a new string, repeating the original string N times

'x'.repeat(2) // 'xx' 'cx'. Repeat (3) // 'CXCXCX' argument NaN is equal to 0. 'na'. Repeat (NaN) // "" If the argument of the repeat is a string, it is converted to a number first. 'na'.repeat('na') // "" 'na'.repeat('3') // "nanana"Copy the code

8. PadStart (), padEnd ()

For string completion, takes two arguments, the first is the maximum length of string completion, the second is the string used for completion, as follows:

'x'.padStart(5, 'ab') // 'ababx' 'x'.padStart(4, 'ab') // 'abax' 'x'.padEnd(5, 'ab') // 'xabab' 'x'.padEnd(4, 'ab') // 'xaba' Note: if the length of the original string is equal to or greater than the maximum length, the completion does not take effect, return the original stringCopy the code

9. matchAll()

The matchAll method returns a regular expression for all matches in the current string

10. Template string

To simplify the writing of the previous template, write as follows:

$('#result').append( 'There are <b>' + basket.count + '</b> ' + 'items in your basket, ' + '<em>' + basket.onSale + '</em> are on sale! '); This is rather cumbersome, and ES6 has introduced template strings to solve this problem. $('#result').append(` There are <b>${basket.count}</b> items in your basket, <em>${basket.onSale}</em> are on sale! `); You can put any JavaScript expression inside curly braces, perform operations, and reference object properties. let x = 1; let y = 2; `${x} + ${y} = ${x + y}` // "1 + 2 = 3" `${x} + ${y * 2} = ${x + y * 2}` // "1 + 4 = 5" let obj = {x: 1, y: 2}; `${obj.x + obj.y}` // "3"Copy the code

11. Template compilation

Using the < %… %> places JavaScript code using <%=… %> outputs the JavaScript expression as follows:

let template = `
<ul>
  <% for(let i=0; i < data.supplies.length; i++) { %>
    <li><%= data.supplies[i] %></li>
  <% } %>
</ul>
`;
Copy the code

12. Label template

A template string can be followed by the name of a function that will be called to process the template string, which is called a tag template. As follows:

alert(123)
alert`123`
Copy the code

A tag template is not really a template, but a special form of a function. The “tag” is the function, and the template string that follows becomes its argument. But if there are variables in the template string, the template string is processed as multiple arguments before the function is called. As follows:

let a = 5; let b = 10; tag`Hello ${ a + b } world ${ a * b }`; // Equivalent to tag(['Hello ', 'world ', ''], 15, 50);Copy the code

13. String.raw()

ES6 provides a raw method for native String objects. A function that acts as a template string handler, returning a string with escaped slashes corresponding to the template string after the substitution. As follows:

String.raw`Hi\n${2+3}! `; / / return "Hi \ \ n5!" String.raw`Hi\u000A! `; / / return "Hi \ \ u000A!"Copy the code

14. Constraints on template strings

Template strings escape strings by default and cannot be embedded in other languages. To address this issue, ES2018 has relaxed restrictions on string escapes inside tag templates. If an illegal string escape is encountered, undefined is returned instead of an error, and the raw string is retrieved from the raw property.

Welcome to pay attention to the public account [Xiaoyao students]

ES6 Introduction series

ES6 Introduction to let and cont

ES6 introduction to variable deconstruction assignment

Git tutorial

Front-end Git basics tutorial