JavaScript -- string type

String extraction method

slice() substr() substring()

Function: returns a substring of the corresponding string, and both receive one or two parameters.
Difference: for slice() and substituting(), the first parameter represents the starting position of the substring, the second parameter represents the ending position of the substring extraction, and for substr(), the second parameter represents the number of returned substrings.
Omitting the second parameter will extract to the end of the string

 let str = 'hello world'
 console.log(str.slice(3)) // lo world
 console.log(str.substring(3)) // lo world
 console.log(str.slice(3, 5)) // lo
 console.log(str.substr(3, 5)) // lo wo

When a parameter is negative:
The slice() method treats all negative parameters as string lengths plus negative parameter values.

 console.log(str.slice(-3)) // rld
 console.log(str.slice(3, -4)) //lo w

Here, when a negative parameter value is passed to slice, - 3 will be converted to 8 (11 + (- 3)). In fact, slice(8) is called; When the second parameter is negative, slice() converts the second parameter to 7. In fact, slice(3,7) is called.

The substring() method converts all negative values to 0.

 console.log(str.substring(-3)) // hello world
 console.log(str.substring(3, -4)) // hel

Here, substring() will convert all negative values to 0, so the first example actually calls substring(0), that is, all strings; The second example actually calls substring(3,0), but it is equivalent to substring(0,3), because this method will automatically take the smaller parameter as the starting point.

The substr() method takes the first negative parameter value as the string length plus the value, and converts the second negative parameter to 0.

 console.log(str.substr(-3)) //rld
 console.log(str.substr(3, -4)) // ""(empty)

Note here that - 4 in the second example will be automatically converted to 0, which means that the returned string contains 0 characters, so the returned string is an empty string.

String position method

indexOf() lastIndexOf()

Function: both methods search the incoming string and return the location.
Difference: the indexOf () method looks for a string from the beginning of the string, while lastIndexOf() looks for a string from the end of the string.

 let str = 'hello world'
 console.log(str.indexOf('o')) // 4
 console.log(str.lastIndexOf('o'))  // 7

When the method receives two parameters, the second parameter indicates where to start the search.
This means that indexOf () will search the end of the string from the position specified by this parameter, ignoring the characters before that position; lastIndexOf() will start from the position pointed to by this parameter and want to search at the beginning of the string, ignoring the characters from the position to the end of the string.

 console.log(str.indexOf("o", 6)); // 7
 console.log(str.lastIndexOf("o", 6)); // 4

Here, the first example starts with the "w" character and looks back for the first "o" character; The second example is to find the first "o" character from "w".

ES6 new method - string containing method

startsWith() endsWith() includes()

Function: search the incoming string from the string and return a Boolean value indicating whether it is included.
difference:
startsWith() checks whether it matches from the first character (that is, whether the first few characters are the substring to be checked);
endsWith() checks for a match looking forward from the last character. (that is, whether the last few characters are the substring to be checked.);
includes() checks the entire string.

 let message = "foobarbaz";
 console.log(message.startsWith("foo")); // true
 console.log(message.startsWith("bar")); //false

 console.log(message.endsWith("foo")); //fasle
 console.log(message.endsWith("baz")); //true

 console.log(message.includes("bar")); //true    
 console.log(message.includes("dmsl")); //fasle

When two parameters are received:

 console.log(message.startsWith("foo")); //true
 console.log(message.startsWith("foo", 1)); // false

 console.log(message.endsWith("baz")); // true
 console.log(message.endsWith("baz", 6)); // false

 console.log(message.includes("bar")); // true
 console.log(message.includes("bar", 4)); // false

The second parameter of the startsWIdth() and includes() methods indicates where to start the search. If the second parameter is passed in, it means that the two methods will search from the specified position to the end of the string.
On the other hand, endsWith() indicates that the second parameter should be the position at the end of the string.

trim()

Function: used to clear all space characters before and after the string.

 let s1 = "  11  ";
 console.log(s1); // "  11  "
 console.log(s1.trim()); // "11"

In addition, trimLeft() clears only the left space and trimlight() clears only the right space.

String iteration and Deconstruction

The prototype of the string exposes a @ @ iterator method that represents each character of the string that can be iterated.
In the for of loop, each character can be accessed sequentially through the iterator:

 for (const code of "abcfd") {
      console.log(code);
 }

The string is divided into character arrays by deconstruction

 let message = "abcde";
 console.log([...message]); // ['a', 'b', 'c', 'd', 'e']

split()

Function: splits the string into an array according to the incoming delimiter.
The first parameter is used as the separator, and the second parameter indicates the number of returned array elements.

 let message = "abcde";
 console.log(message.split("")); // ['a', 'b', 'c', 'd', 'e']
 console.log(message.split("", 3)); // ['a', 'b', 'c']

Keywords: Javascript Front-end string

Added by newbie5050 on Tue, 18 Jan 2022 09:56:06 +0200