Summary of 28 common JavaScript string methods and usage tips

Preface

Today let’s look at some JavaScript basics. The basics are so important. I still remember clearly that during the spring recruitment this year, an interviewer from a large company mocked me for not being able to remember the JavaScript API 🤣 It was so embarrassing. The main reason was that I used it too little, so I still need to use it more and accumulate more in my daily life. Today we will take a look at some commonly used string methods in JavaScript! The article contains a lot of content, so it is recommended that you collect it before studying!

1. Get the length of a string

Strings in JavaScript have a length property that can be used to get the length of the string:
const str = 'hello';
str.length // Output: 5

2. Get the value at the specified position of the string

Both the charAt() and charCodeAt() methods can get the value at a specified position by index:

• The charAt() method gets the character at the specified position;
• The charCodeAt() method gets the Unicode value of the character specified as the value.

(1) charAt()

The charAt() method returns the character at the specified position. Its syntax is as follows:

string.charAt(index)

Index represents the index value of the character in the string:

const str = 'hello';
str.charAt(1) // Output: e 

We know that strings can also directly obtain corresponding characters through index values, so what is the difference between it and charAt()? Let’s look at an example:

const str = 'hello';
str.charAt(1) // Output: e 
str[1] // Output: e 
str.charAt(5) // Output: '' 
str[5] // Output: undefined

It can be seen that when the value of index is not within the length range of str, str[index] will return undefined, while charAt(index) will return an empty string; in addition, str[index] is not compatible with ie6-ie8, while charAt(index) is compatible.

(2) charCodeAt()

charCodeAt(): This method returns the Unicode value of the character at the specified index. The return value is an integer between 0 and 65535, representing the UTF-16 code unit at the given index. If there is no character at the specified position, NaN will be returned:

let str = "abcdefg";
console.log(str.charCodeAt(1)); // "b" --> 98

This method can be used to obtain characters in a specified Unicode encoding value range in a string. For example, the Unicode encoding range of the numbers 0 to 9 is: 48 to 57. You can use this method to filter numbers in a string. Of course, if you are more familiar with regular expressions, it will be more convenient.

3. Check if a string contains a specific sequence

These five methods can be used to retrieve whether a string contains a specific sequence. The first two methods get the index value of the specified element and only return the position of the first matched value. The last three methods return a Boolean value, indicating whether the specified value is matched.

Note: These 5 methods are case sensitive!

(1) indexOf()

indexOf(): Searches for a character and returns the first matching position if found, otherwise returns -1. Its syntax is as follows:

string.indexOf(searchvalue,fromindex)

This method takes two parameters:

• searchvalue: required, specifies the string value to be searched;
• fromindex: An optional integer parameter that specifies the position in the string where the search starts. Its legal values ​​are 0 to string.length - 1. If omitted, the search starts from the first character of the string.

let str = "abcdefgabc";
console.log(str.indexOf("a")); // Output: 0
console.log(str.indexOf("z")); // Output: -1
console.log(str.indexOf("c", 4)) // Output: 9

(2) lastIndexOf()

lastIndexOf(): Searches for a character and returns the position of the last match if there is one, otherwise returns -1

let str = "abcabc";
console.log(str.lastIndexOf("a")); // Output: 3
console.log(str.lastIndexOf("z")); // Output: -1

This method is similar to indexOf(), but the search order is different. indexOf() searches in positive order, while lastIndexOf() searches in reverse order.

(3) includes()

includes(): This method is used to determine whether a string contains a specified substring. Returns true if a matching string is found, false otherwise. The syntax of this method is as follows:

string.includes(searchvalue, start)

This method takes two parameters:

• searchvalue: required, the string to search for;
• start: Optional, set the position to start searching from, the default is 0.

let str = 'Hello world!';

str.includes('o') // Output: true
str.includes('z') // Output: false
str.includes('e', 2) // Output: false

(4) startsWith()

startsWith(): This method is used to detect whether a string starts with a specified substring. Returns true if it starts with the specified substring, otherwise false. The syntax is the same as for the includes() method above.

let str = 'Hello world!';

str.startsWith('Hello') // Output: true
str.startsWith('Helle') // Output: false
str.startsWith('wo', 6) // Output: true

(5) endsWith()

endsWith(): This method is used to determine whether the current string ends with the specified substring. Returns true if the passed substring is at the end of the search string, otherwise returns false. Its syntax is as follows:

string.endsWith(searchvalue, length)

This method takes two parameters:

• searchvalue: required, the substring to search for;
• length: Set the length of the string. The default value is the original string length string.length.

let str = 'Hello world!';

str.endsWith('!') // Output: true
str.endsWith('llo') // Output: false
str.endsWith('llo', 5) // Output: true

As you can see, when the second parameter is set to 5, the search will be performed from the first 5 characters of the string, so true will be returned.

4. Concatenate multiple strings

The concat() method is used to concatenate two or more strings. This method does not change the original string, but returns a new string that concatenates two or more strings. Its syntax is as follows:

string.concat(string1, string2, ..., stringX)

The parameters string1, string2, ..., stringX are required, and they will be one or more string objects that will be concatenated into one string.

let str = "abc";
console.log(str.concat("efg")); //Output: "abcefg"
console.log(str.concat("efg","hijk")); //Output: "abcefghijk"

Although the concat() method is specifically used to concatenate strings, the addition operator + is the most commonly used in development because it is simpler.

5. Split a string into an array

The split() method is used to split a string into an array of strings. This method does not change the original string. Its syntax is as follows:

string.split(separator,limit)

This method takes two parameters:

• separator: required. A string or regular expression that splits the string at the specified point.
• limit: Optional. This parameter specifies the maximum length of the returned array. If this parameter is set, no more substrings will be returned than the array specified by this parameter. If this parameter is not set, the entire string will be split regardless of its length.

let str = "abcdef";
str.split("c"); // Output: ["ab", "def"]
str.split("", 4) // Output: ['a', 'b', 'c', 'd'] 

If an empty string is used as a separator, then each character in the string will be separated.

str.split(""); // Output: ["a", "b", "c", "d", "e", "f"]

In fact, when splitting a string into an array, you can split multiple separators at the same time, which can be achieved using regular expressions:

const list = "apples,bananas;cherries"
const fruits = list.split(/[,;]/)
console.log(fruits); // Output: ["apples", "bananas", "cherries"]

6. Intercepting a string

The substr(), substring(), and slice() methods can all be used to extract strings.

(1) slice()

The slice() method is used to extract a portion of a string and return the extracted portion as a new string. Its syntax is as follows:

string.slice(start,end)

This method takes two parameters:

• start: Required. The starting subscript of the fragment to be intercepted, with the first character position being 0. If it is a negative number, it will be truncated from the end.
• end: Optional. The index of the end of the segment to be truncated. If this parameter is not specified, the substring to be extracted includes the string from start to the end of the original string. If this parameter is negative, it specifies the position from the end of the string.

As mentioned above, if start is a negative number, the parameter specifies the position starting from the end of the string. That is, -1 refers to the last character of the string, -2 refers to the second-to-last character, and so on:

let str = "abcdef";
str.slice(1,6); // Output: "bcdef" 
str.slice(1); // Output: "bcdefg" 
str.slice(); // Output: "abcdefg" 
str.slice(-2); // Output: "fg"
str.slice(6, 1); // Output: ""

Note that this method returns the substring including the starting characters but not the ending characters.

(2) substr()

The substr() method is used to extract a specified number of characters from a string starting from the starting subscript. Its syntax is as follows:

string.substr(start,length)

This method takes two parameters:

• start Required. The starting index of the substring to be extracted. Must be a numeric value. If negative, the parameter specifies the position from the end of the string. That is, -1 refers to the last character in the string, -2 refers to the second-to-last character, and so on.
• length: optional. The number of characters in the substring. Must be a numeric value. If this parameter is omitted, the string from the start position to the end of stringObject is returned.

let str = "abcdef";
str.substr(1,6); // Output: "bcdefg" 
str.substr(1); // Output: "bcdefg" is equivalent to intercepting [1, str.length-1]
str.substr(); // Output: "abcdefg" is equivalent to intercepting [0, str.length-1]
str.substr(-1); // Output: "g"

(3) substring()

The substring() method is used to extract characters from a string between two specified subscripts. Its syntax is as follows:

string.substring(from, to)

This method takes two parameters:

• from: required. A non-negative integer that specifies the position in string of the first character of the substring to be extracted.
• to: Optional. A nonnegative integer that is one more than the position in string of the last character of the substring to be extracted. If this parameter is omitted, the returned substring will end at the end of the string.

Note: If the parameters from and to are equal, then this method returns an empty string (that is, a string of length 0). If from is greater than to, the method swaps the two parameters before extracting the substring. And this method does not accept negative parameters. If the parameter is a negative number, it will return the string.

let str = "abcdef";
str.substring(1,6); // Output: "bcdef" [1,6)
str.substring(1); // Output: "bcdefg" [1,str.length-1]
str.substring(); // Output: "abcdefg" [0,str.length-1]
str.substring(6,1); // Output result "bcdef" [1,6)
str.substring(-1); // Output: "abcdefg"

Note that this method returns the substring including the starting characters but not the ending characters.

7. String case conversion

The toLowerCase() and toUpperCase() methods can be used to convert the case of a string.

(1) toLowerCase()

toLowerCase(): This method is used to convert a string to lowercase.
let str = "adABDndj";
str.toLowerCase(); // Output: "adabdndj"

(2) toUpperCase()

toUpperCase(): This method is used to convert a string to upper case.

let str = "adABDndj";
str.toUpperCase(); // Output: "ADABDNDJ"

We can use this method to uppercase the first letter in a string:

let word = 'apple'
word = word[0].toUpperCase() + word.substr(1)
console.log(word) // Output: "Apple"

8. String Pattern Matching

The replace(), match(), and search() methods can be used to match or replace characters.

(1) replace()

replace(): This method is used to replace some characters in a string with other characters, or to replace a substring that matches a regular expression. Its syntax is as follows:

string.replace(searchvalue, newvalue)

This method takes two parameters:

• searchvalue: required. A RegExp object specifying the substring or pattern to be replaced. If the value is a string, it is treated as a literal text pattern to be retrieved, rather than being converted to a RegExp object first.
• newvalue: required. A string value. Specifies replacement text or a function that generates replacement text.

let str = "abcdef";
str.replace("c", "z") // Output: abzdef

Perform a global replace, ignoring case:

let str="Mr Blue has a blue house and a blue car";
str.replace(/blue/gi, "red"); // Output: 'Mr red has a red house and a red car'

Note: If regexp has the global flag g, then the replace() method will replace all matching substrings. Otherwise, it replaces only the first matching substring.

(2) match()

match(): This method is used to search for a specified value within a string, or to find a match for one or more regular expressions. This method is similar to indexOf() and lastIndexOf(), but it returns the specified value instead of the position in the string. Its syntax is as follows:

string.match(regexp)

The regexp parameter of this method is required and specifies the RegExp object of the pattern to match. If the parameter is not a RegExp object, you need to first pass it to the RegExp constructor to convert it to a RegExp object.

Note: This method returns an array containing the matching results. The contents of this array depend on whether regexp has the global flag g.

let str = "abcdef";
console.log(str.match("c")) // ["c", index: 2, input: "abcdef", groups: undefined]

(3) search()

The search() method is used to search for a specified substring in a string, or to search for a substring that matches a regular expression. Its syntax is as follows:

string.search(searchvalue)

The parameter regex of this method can be the substring to be searched in string, or the RegExp object to be searched.

Note: To perform a case-insensitive search, append the i flag. This method does not perform global matching, it will ignore the flag g, that is, only the result of the first successful match will be returned. If no matching substring is found, -1 is returned.

Return value: Returns the starting position of the first substring in str that matches regexp.

let str = "abcdef";
str.search(/bcd/) // Output: 1

9. Remove trailing whitespace from a string

The trim(), trimStart(), and trimEnd() methods can be used to remove leading and trailing whitespace characters from a string. Whitespace characters include spaces, tabs, newlines, and other whitespace characters.

(1) trim()

The trim() method is used to remove leading and trailing whitespace characters from a string. This method does not change the original string:

let str = " abcdef "
str.trim() // Output: "abcdef"

Note that this method does not apply to null, undefined, and Number types.

(2) trimStart()

The trimStart() method behaves the same as trim(), but returns a new string with whitespace removed from the beginning of the original string, without modifying the original string:

const s = 'abc';

s.trimStart() // "abc "

(3) trimEnd()

The trimEnd() method behaves the same as trim(), but returns a new string with whitespace removed from the end of the original string, without modifying the original string:

const s = 'abc';

s.trimEnd() // " abc"

10. Get the string itself

Both valueOf() and toString() methods return the value of the string itself, which seems to be of little use.

(1) valueOf()

valueOf(): Returns the primitive value of a string object. This method is usually called automatically by JavaScript rather than explicitly in your code.

let str = "abcdef"
console.log(str.valueOf()) // "abcdef"

(2) toString()

toString(): Returns the string object itself

let str = "abcdef"
console.log(str.toString()) // "abcdef"

11. Repeat a string

The repeat() method returns a new string, which means the original string is repeated n times:

'x'.repeat(3) // Output: "xxx"
'hello'.repeat(2) // Output: "hellohello"
'na'.repeat(0) // Output: ""

If the argument is a decimal, it is rounded down:

'na'.repeat(2.9) // Output: "nana"

If the parameter is a negative number or Infinity, an error will be reported:

'na'.repeat(Infinity) // RangeError
'na'.repeat(-1) // RangeError

If the argument is a decimal number between 0 and -1, it is equivalent to 0 because rounding is performed first. A decimal between 0 and -1, which is rounded to -0 and is considered 0 for repeat.

'na'.repeat(-0.9) // Output: ""

If the argument is NaN, it is equivalent to 0:

'na'.repeat(NaN) // Output: ""

If the argument to repeat is a string, it will be converted to a number first.

'na'.repeat('na') // Output: ""
'na'.repeat('3') // Output: "nanana"

12. Padding the string length

The padStart() and padEnd() methods are used to pad the length of the string. If a string is not of the specified length, it will be padded at the beginning or end.

(1) padStart()

padStart() is used for header completion. This method has two parameters. The first parameter is a number indicating the length of the string after padding; the second parameter is the string used for padding.​

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

'x'.padStart(1, 'ab') // 'x'

If the sum of the lengths of the string used for completion and the original string exceeds the specified minimum length, the excess digits in the completion string will be truncated:

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

If the second argument is omitted, spaces are used to complete the length by default:

'x'.padStart(4, 'ab') // 'a '

A common use of padStart() is to pad a value to a specified number of digits. One of the requirements I recently made is to pad the returned page number to three digits, for example, page 1 is displayed as 001, and this method can be used to operate:

"1".padStart(3, '0') // Output: '001'
"15".padStart(3, '0') // Output: '015'

(2) padEnd()

padEnd() is used for tail completion. This method also accepts two parameters. The first parameter is the maximum length of the string completion to take effect, and the second parameter is the string used for completion:

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

13. Convert string to number

Both parseInt() and parseFloat() methods are used to convert strings into numbers.

(1) parseInt()

The parseInt() method is used to parse a string and return an integer. Its syntax is as follows:

parseInt(string, radix)

This method takes two parameters:

• string: required. The string to be parsed.
• radix: Optional. Indicates the base of the number to be parsed. The value is between 2 and 36.

When the value of the radix parameter is 0 or not set, parseInt() will determine the radix of the number based on string.

parseInt("10"); // Output: 10
parseInt("17",8); // Output: 15 (8+7)
parseInt("010"); // Output: 10 or 8

When the value of the radix parameter starts with "0x" or "0X", the base is 16:

parseInt("0x10") // Output: 16

If the argument is less than 2 or greater than 36, parseInt() will return NaN:

parseInt("50", 1) // Output: NaN
parseInt("50", 40) // Output: NaN

Only the first digit in the string will be returned, until the first non-digit character is encountered:

parseInt("40 4years") // Output: 40

If the first character of the string cannot be converted to a number, NaN is returned:

parseInt("new100") // Output: NaN

Leading and trailing spaces are allowed:

parseInt(" 60 ") // Output: 60

(2) parseFloat()

The parseFloat() method parses a string and returns a floating point number. This method specifies whether the first character in a string is a digit. If it is, the string is parsed until the end of the number is reached, and the number is returned as a number, not as a string. Its syntax is as follows:

parseFloat(string)

parseFloat parses its string argument into a floating point number and returns it. If it encounters any character other than a sign (+ or -), a number (0-9), a decimal point, or an exponent (e or E) in scientific notation during parsing, it ignores that character and all subsequent characters and returns the floating-point number that has been parsed so far. Also, leading whitespace characters in the argument string are ignored.

parseFloat("10.00") // Output: 10.00
parseFloat("10.01") // Output: 10.01
parseFloat("-10.01") // Output: -10.01
parseFloat("40.5 years") // Output: 40.5

If the first character of the argument string cannot be parsed as a number, parseFloat returns NaN.

parseFloat("new40.5") // Output: NaN

Summarize

This concludes this article about JavaScript's commonly used string methods and usage tips. For more related JS commonly used string methods and tips, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!