15 methods in "understand series after reading" teach you to play with strings

As JavaScript Basic data type , Strings have some powerful methods , There are also many places used in daily work , Many times, because I am not familiar with the method of a string , Often take many detours , So the big ice cubes are sorted 15 A common and efficient string method , Come and have a look at this 15 A way to improve work efficiency ！

1.  Remove leading and trailing spaces from the string  —— trim()

explain ：

  Remove the white space on both sides of the string .

Demand scenarios ：

  Remove the leading and trailing spaces before the user searches .

usage ：

 

string.trim()

Example ：

let str = "  White is not white , Black is not black , I ... I don't like you  "
let result = str.trim()
console.log(result); //  Console printing ：" White is not white , Black is not black , I ... I don't like you "


2.  Replace specified character with string （ strand ）—— replace()

explain ：

  String replacement character or

replace()

The most powerful ~ Replace the first qualified string by default , Regularization can also be used for global matching

Demand scenarios ：

  String replacement , Shielding and hiding of keywords

** usage ： ** 

string.replace(searchvalue,newvalue)

Example ：

let str = " You know what? ？ There is... In the world 60 Hundreds of millions of people , The universe has 60 Trillion asteroids , You are 10000 times more precious than asteroids "
let result1 = str.replace(" Billion "," individual ")
let result2 = str.replace(/ Billion /g," individual ")
console.log(result1) //  Console printing ：" You know what? ？ There is... In the world 60 personal , The universe has 60 Trillion asteroids , You are 10000 times more precious than asteroids "
console.log(result2) //  Console printing ：" You know what? ？ There is... In the world 60 personal , The universe has 60 Ten thousand asteroids , You are 10000 times more precious than asteroids "


3.  String merge  —— concat()

explain ：

  Connect two or more strings , And return the new string .（ Whisper it to you , Arrays can also be used ~）

Demand scenarios ：

  String merge display .

usage ：

 

string.concat()

Example ：

let str1 = " I have many sweet words ,"
let str2 = " But I dare not say it when I face you ."
let result = str1.concat(str2)
console.log(result) //  Console printing ：" I have many sweet words , But I dare not say it when I face you ."


4.  String to array  —— split()

explain ：

  Divide the string into an array of strings through specific characters ,

split

Regular expressions can also be used to split multiple delimiters .

Demand scenarios ：

  String to array for traversal and other operations .

usage 1：

 

string.split()

usage 2：

 

string.split(/[*]/)

Example ：

let str = " Zhang San , Li Si ; Wang Wu "
let result1 = str.split(',')
let result2 = str.split(/[,;]/)
console.log(result1) //  Console printing ：[" Zhang San ", " Li Si ; Wang Wu "]
console.log(result2) //  Console printing ：[" Zhang San ", " Li Si ", " Wang Wu "]


5.  String to array  —— [...string]

** explain ： **  To say , This is not a string method , Mainly because I think ES6 Extension operator in syntax ... Syntax is the simplest way to convert arrays . It and

split()

The difference lies in ：

...

Syntax does not cut according to specific characters , Instead, each character is added to the array as a separate element .

** Demand scenarios ： **  All strings are divided into character arrays .

usage ：

 

[...string]

Example ：

let str = ' This is a string string'
let arr = [...str]
console.log(arr) //  Console printing ：[" this ", " yes ", " One ", " individual ", " word ", " operator ", " strand ", "s", "t", "r", "i", "n", "g"]


6.  String inversion  —— [...string].reverse().join("")

explain ：

  This is not a string method , But it's easy to use. . In essence, it is still converted into an array , After array inversion , Then splice it into a string .

Demand scenarios ：

  Invert the current string to output

usage ：

 

[...string].reverse().join("")

Example ：

let str = " Pole reversal , The tornado destroyed the parking lot !"
let result = [...str].reverse().join("")
console.log(result) //  Console printing ：! The car stops and destroys the wind and tornado , Reverse pole two


7.  Multiple copies of strings  —— repeat ()

explain ：

  Copy string specified number of times , And connect them back together .

Demand scenarios ：

  The string needs to be  n  Automatic replication .

usage ：

 

string.repeat(n)

Example ：

let str1 = ' Copy '
let result = str1.repeat(2)
consol.log(result) //  Console printing ： Copy copy

let str2 = '10'
let result = str2.repeat(5)
console.log(result) //  Console printing ：1010101010


8.  Whether the string contains a character  （ strand ）—— search()

** explain ：** Retrieve the first substring specified in the string or matching the regular expression . If it matches, it returns the first character subscript of the matching string , If it doesn't match , Then return to  -1.

Demand scenarios ：

  Search, query and location of keywords in the string .

usage ：

 

string.search(searchvalue)

.

Example ：

let str = " The night is very good today , The moon is also very round , The only regret is that , I don't see the moon from your window ."
let result1 = str.search(" The moon ")
let result2 = str.search(/[,.]/)
console.log(result1) //  Console printing ：8
console.log(result2) //  Console printing ：7


9.  Whether the string contains a character （ strand ）—— includes()

explain ：

 

includes()

You can choose to start searching after subscribing somewhere , return true or false. The second parameter represents starting from a certain subscript , If omitted, it means subscript 0 Start looking for .

It and search() The difference lies in ：

search()

Returns the specified subscript , 

includes()

return true or false;

search()

Cannot start searching from the specified subscript , 

includes()

You can start searching at the specified subscript .

Demand scenarios ：

  Judge whether there are illegal characters in the string

usage ：

 

string.includes(searchvalue, start)

Example ：

let str = " There is no cool wind in summer , There is no warm winter sun , They just happen to appear at the right time "
let result1 = str.includes(" In winter ")
let result2 = str.includes(" In winter ",20)
console.log(result1); //  Console printing ：true
console.log(result2); //  Console printing ：false


10.  The position of the string value specified in the string at the first or last occurrence  —— indexOf()  and  lastIndexOf()

explain ：

indexOf()

  Method returns the first occurrence of a specified string value , Search from front to back . If you specify the second parameter  start, Search from front to back at the specified position in the string .

lastIndexOf()

  Method can return the last position of a specified string value , That is, search from back to front . If you specify the second parameter  start, Then search from back to front at the specified position in the string .

Demand scenarios ：

  Where the keyword first or last appears

usage 1：

 

string.indexOf(searchvalue,start)

  The position where the specified string value first appears

usage 2：

 

string.lastIndexOf(searchvalue,start)

  The last position of the specified string value

Example ：

let str = " You come to earth , You have to look at the sun . Walk down the street with your sweetheart , Get to know her , Understand the sun, too "
let result1 = str.indexOf(" The sun ")
let result2 = str.indexOf(" The sun ",10) //  from 10 The subscript character starts searching " The sun ", The search scope is " The sun . Walk down the street with your sweetheart , Get to know her , Understand the sun, too ", The subscript is still relative to the original string , Therefore return 11.
let result3 = str.lastIndexOf(" The sun ") 
let result4 = str.lastIndexOf(" The sun ",10) // 0-10 The subscript string is " You come to earth , You need to see ", No, " The sun ", return -1
console.log(result1) //  Console printing ：11
console.log(result2) //  Console printing ：11
console.log(result3) //  Console printing ：35
console.log(result4) //  Console printing ：-1


11.  String to case  —— toLowerCase()  and  toUpperCase()

explain ：

  Conversion between case and character string

Demand scenarios ：

  website , English name , Initial capitalization and other requirements .

usage 1：

 

string.toLowerCase()

  Turn to lowercase

usage 2：

 

string.toUpperCase()

  Turn it into capital letters

Example ：

let str = "For you, A thousand times over"
let result1 = str.toLowerCase()
let result2 = str.toUpperCase()
console.log(result1) //  Console printing ："for you, a thousand times over"
console.log(result2) //  Console printing ："FOR YOU, A THOUSAND TIMES OVER"


12.  The string is filled to the specified length  —— padStart ()  and  padEnd ()

explain ：

  String fills the specified character to the specified length

Demand scenarios ：

  The string length is insufficient , It needs to be supplemented to the specified length n, Such as date , Hide mobile phone number , Hide nicknames, etc .

usage 1：

 

string.padStart(n,' Supplementary content ')

  Add additional content before the string .

usage 2：

 

string.padEnd (n,' Supplementary content ')

  Add additional content after the string .

Example ：

//  Add "-", Until the length of the string is 5
let str1 = ' Ready to start '
let result = str1.padStart(5, '-')
console.log(result) //  Console printing ："--- Ready to start "

// Add... At the end "*", Until the length of the string is 11
let str2 = "184"
let result = str2.padEnd(11, "*")
console.log(result) //  Console printing ："184********"


13.  Whether the string is in a specific character （ strand ） Beginning or end  —— startsWith()、endsWith()

explain ：

  Used to detect whether a string starts with a specified substring . If it starts with the specified substring  true, otherwise  false.

startsWith()

、

endsWith()

Method case sensitive . The second parameter represents whether to judge whether to use a specific character from a certain subscript （ strand ） Beginning or end , Ignore

startsWith()

From the subscript 0 Start detection ,

endsWith()

Detect from the last subscript of the string .

It is worth noting that ：

When

startsWith()

  If the second parameter of exceeds the maximum length of the current string , Still in effect , return false.

When

endsWith()

  If the second parameter of exceeds the maximum length of the current string , Will not take effect , Instead, start detection from the last subscript of the string .

Demand scenarios ：

  Determine whether the string begins or ends with the specified character

usage 1：

 

string.startsWith(searchvalue, start)

usage 2：

 

string.endsWith(searchvalue, start)

Example ：

let str = " In the past , Let's smile at each other , Most of my life has passed "
let result1 = str.startsWith(" In the past ")
let result2 = str.startsWith(" In the past ",10)
let result3 = str.endsWith(" Half my life ")
let result4 = str.endsWith(" Half my life ",20)
console.log(result1); //  Console printing ：true
console.log(result2); //  Console printing ：false
console.log(result3); //  Console printing ：true
console.log(result4); //  Console printing ：false


14.  String length calculation  —— length

explain ：

 length Attributes are not just attributes of arrays , At the same time, pseudo array , All strings have length attribute . But I met some rare words, such as “𩸽” Or emoticons “”, Their length by 2, At this time back length Maybe not what we really want . This is because js Strings are created by 16 Bit code units , Rather than by Unicode Code point composition . meanwhile js Use two code units to represent 216 And above Unicode Code points . These two code units are called proxy pairs . A code unit is defaulted to 1 Unit of length , image “𩸽” perhaps “” Is a proxy pair consisting of two code units , So their length by 2.

Demand scenarios ：

  Find the current string length

usage ：

 

string.length

Example ：

let str = " Meet and grow old together , You are quietly bald "
let result = str.length
console.log(result) //  Console printing ：14


15.  String interception  —— substr()  and  slice()  and  substring()

explain ：

  String interception and splicing are the most common and error prone methods for strings . The main reason is  

substr()

 、 

slice()

  and  

substring()

There are many friends who don't quite understand the difference between . Because there are many details , I opened a new article to write about their differences ：

《 After reading the series 》 String interception method substr() 、 slice()  and  substring() The difference and usage of ]()

substr()：

Parameter one （ must ）： An integer , To start intercepting subscripts of characters , If it is negative, it means to intercept from the tail . Parameter two （ Optional ）： An integer , Number of characters to intercept . If this parameter is omitted , The default is

string.length

, That is, the length of the current string .

slice() ：

Parameter one （ must ）： An integer , To start intercepting subscripts of characters , If it is negative, it means to intercept from the tail . Parameter two （ Optional ）： An integer , To end the subscript of the intercepted character , If it is negative, it represents how many characters are intercepted from the tail . If this parameter is omitted , The default is string.length, That is, the length of the current string .

substring() ：

Parameter one （ must ）： A nonnegative integer , To start intercepting subscripts of characters . Parameter two （ Optional ）： A nonnegative integer , To end the subscript of the intercepted character . If this parameter is omitted , The default is string.length, That is, the length of the current string .

Demand scenarios ：

  Intercept the string with specified subscript and specified length

usage 1：

 string.substr(

start

,

length

)

usage 2：

 string.slice(

start

,

end

)

usage 3：

 string.substring(

start

,

end

)

Example ：

let str = '0123456789'
let result1 = str.substr(2,5) //  From the subscript 2 Began to intercept , Intercept 5 position
let result2 = str.slice(2,5) //  From the subscript 2 Began to intercept , Intercept to subscript 5（ Without subscript 5）
let result3 = str.substring(2,5) //  From the subscript 2 Began to intercept , Intercept to subscript 5（ Without subscript 5）

console.log(result1) //  Console printing ：23456
console.log(result2) //  Console printing ：234
console.log(result3) //  Console printing ：234


summary

This is commonly used about strings 15 Methods are described in detail , But many times in our work , They may not be used well . Mostly because they are not proficient , It's easy to forget after watching it , So we should often turn over these commonly used methods , Maybe you can save dozens of minutes in your work ~ 

Contribute to the great cause of fishing

 ~

This is big ice 《 After reading the series 》 Of the 2 An article ,《 After reading the series 》 It aims to present some common concepts or methods in an easy to understand way .

Originality is not easy. , If there is a mistake , Welcome to point out .

If it helps you , Please give the big ice cubes three times （ Like collection comments ）, Let's make progress on the front end ~🤭