Extended instance analysis of new feature strings in ES6 and new feature instance analysis in es6

Extended instance analysis of new feature strings in ES6 and new feature instance analysis in es6

This article describes the string extension of the new features of ES6. We will share this with you for your reference. The details are as follows:

1. ES5 string functions

Concat: combines two or more characters to return a new string.
IndexOf: returns the index that appears at the first part of a substring in a string (from left to right ). If no match exists,-1 is returned.
CharAt: returns the character at the specified position.
LastIndexOf: returns the index (from right to left) at the end of a substring in the string. If no match exists,-1 is returned.
Match: Check whether a string matches the content of a regular expression. If yes, null is returned.
Substring: returns a substring of a string. The input parameter is the start position and end position.
Substr: returns a substring of a string. The input parameter is the start position and length.
Replace: Used to find a string that matches a regular expression, and then replace the matched string with a new string.
Search: execute a regular expression to match and search. If the search is successful, the matching index value in the string is returned. Otherwise,-1 is returned.
Slice: extract part of the string and return a new string (same as substring ).
Split: divides a string into substrings to form a string array.
Length: returns the length of a string. The length of a string refers to the number of characters it contains.
ToLowerCase: Convert the entire string into lowercase letters.
ToUpperCase: converts the entire string into uppercase letters.

Ii. Add common functions in ES6

Traditionally, Javascript only has the indexOf method, which can be used to determine whether a string is contained in another string. ES6 provides three new methods.

Des (): returns a Boolean value, indicating whether the parameter string is found.
StartsWith (): returns a Boolean value indicating whether the parameter string is in the header of the source string.
EndsWith (): returns a Boolean value indicating whether the parameter string is at the end of the source string.

var s = 'Hello world!';s.startsWith('Hello') // trues.endsWith('!') // trues.includes('o') // true

Repeat (): returns a new string that repeats the original string n times.

'x'.repeat(3) // "xxx"'hello'.repeat(2) // "hellohello"'na'.repeat(0) // ""'na'.repeat(2.9) // "nana"'na'.repeat(Infinity)// RangeError'na'.repeat(-1)// RangeError'na'.repeat(-0.9) // ""

If the parameter is a decimal number, it will be rounded down (rounded down ).
If the parameter is negative or Infinity, an error is returned.
The parameter is a decimal number between 0 and-1, which is equivalent to 0, because the integer operation is performed first. Decimal place between 0 and-1, which is equal to-0 after the integer is obtained, and the repeat value is equal to 0.
The NaN parameter is equivalent to 0.

ES7 introduces the character string length completion function. If the length of a string is not specified enough, it is completed in the header or tail. PadStart is used for header completion, and padEnd is used for Tail completion. PadStart and padEnd both accept two parameters. The first parameter is used to specify the minimum length of the string, and the second parameter is used to complete the string.

'x'.padStart(5, 'ab') // 'ababx''x'.padStart(4, 'ab') // 'abax''x'.padEnd(5, 'ab') // 'xabab''x'.padEnd(4, 'ab') // 'xaba'

If the length of the original string is equal to or greater than the specified minimum length, the original string is returned.

If the sum of the length of the string to be supplemented exceeds the specified minimum length, the string to be supplemented exceeds the number of digits is truncated.

If the second parameter is omitted, spaces are used to fill in the length.

Iii. template string

1. multiline string

In the traditional Javascript language, the output template is usually written in this way.

$('#result').append(  'There are <b>' + basket.count + '</b> ' +  'items in your basket, ' +  '<em>' + basket.onSale +  '</em> are on sale!');

This method is cumbersome and inconvenient. ES6 introduces the template string to solve this problem.

$('#result').append(`  There are <b>${basket.count}</b> items   in your basket, <em>${basket.onSale}</em>  are on sale!`);

Template string is an enhanced character string, which is identified by backquotes. It can be used as a normal string, can be used to define multi-line strings, or embedded variables in strings.

If the template string is used to represent a multi-line string, all spaces and indentation will be retained in the output.

2. Embedded Variables

Embedded variables in the template string. You need to write the variable name in $.

// The variable var name = "Bob", time = "today"; 'Hello $ {name}, how are you $ {time} embedded in the string }? '

3. Call a function

You can also call functions in the template string.

function fn() { return "Hello World";}`foo ${fn()} bar`// foo Hello World bar

If the value in braces is not a string, it is converted to a string according to the general rules. For example, if an object is in braces, The toString method of the object is called by default.

If the variables in the template string are not declared, an error is returned.

If the braces are strings, they are output as they are.

`Hello ${'World'}`// "Hello World"

I hope this article will help you design the ECMAscript program.