Strings are essential data types in JavaScript, and knowing the various methods available for string manipulation is vital for effective coding.
In this blog post, we’ll present a comprehensive cheat sheet covering all the major methods available for strings in JavaScript. Each method will be explained with examples showcasing their input and output.
Let’s dive into the cheat sheet:
| Method | Description | Example | |
|---|---|---|---|
| 1 | length [ES1] | string.length = the length of a string. | "Hello".length; // 5"".length; // 0 |
| 2 | charAt() [ES1] | string.charAt(index) = character at a specified index.– index: Optional // Default is 0 | "Hello".charAt(4); // 'o'"Hello".charAt(); // 'H‘"Hello".charAt(5); // ''"Hello".charAt(1.2); // 'e' |
| 3 | charCodeAt() [ES1] | string.charCodeAt(index) = unicode value of the character at a specified index.Returns: – NaN if the index is invalid. – returns a number between 0 and 65535. | "Hello".charCodeAt(0); // 72"Hello".charCodeAt(); // 72"Hello".charCodeAt(1); // 101"Hello".charCodeAt(9); // NaN"".charCodeAt(); // NaN"".charCodeAt(0); // NaN |
| 4 | toUpperCase() [ES1] | string.toUpperCase() = Converts to uppercase. | "Hello".toUpperCase(); // 'HELLO' |
| 5 | toLowerCase() [ES1] | string.toLowerCase() = Converts to lowercase. | "HELLO".toLowerCase(); // 'hello'"heLLo".toLowerCase(); // 'hello' |
| 6 | indexOf() [ES1] | string.indexOf(searchvalue, startPosition) = the first index where search-value occurs.– searchvalue: Required. – startPosition: Optional. // default 0 Returns -1 if it never occurs. | "Hello".indexOf("e"); // 1"Hello".indexOf("e", 1); // 1"Hello".indexOf("e", 2); // -1"Hello".indexOf("E"); // -1"Hello".indexOf("ello"); 1"Hello".indexOf("l"); // 2"Hello".indexOf("l", 3); // 3 |
| 7 | lastIndexOf() [ES1] | string.lastIndexOf(searchvalue, searchWithinLength) = the last index at which a specified value is found.– searchvalue: Required. – searchWithinLength: Optional. // Default is length of the string. It searches the text within the range 0 to startPosition. Returns -1 if it never occurs. | "banana".lastIndexOf(); // -1"banana".lastIndexOf("a"); // 5"banana".lastIndexOf("a", 4); // 3"banana".lastIndexOf("a", 2); // 1"banana".lastIndexOf("a", 0); // -1"banana".lastIndexOf("ana"); // 3"banana".lastIndexOf("na"); // 4 |
| 8 | includes() [ES6] | string.lastIndexOf(searchvalue, startPosition) = true if the string contains the value, otherwise false.– searchvalue: Required. – startPosition: Optional. // Default is index 0. | "banana".includes("a"); // true"banana".includes("ana"); // true"banana".includes("an", 3); // true"banana".includes("an", 4); // false |
| 9 | startsWith() [ES6] | string.startsWith(searchValue, startPosition) = true if the string starts with the value, Otherwise false.– searchValue: Required. – startPosition: Optional. // Default is index 0. | "banana".startsWith("b"); // true"banana".startsWith("bana"); // true"banana".startsWith("b", 1); // false"banana".startsWith("bana", 2); // false"banana".startsWith("an", 1); // true"banana".startsWith("an", 2); // false |
| 10 | endsWith() [ES6] | string.endsWith(searchvalue, lengthOfTheString) = true if the string starts with the value. Otherwise false.– searchvalue: Required. – lengthOfTheString: Optional. // Default is the length of the string. It searches the text within the specified length of the string. | "banana".endsWith("b"); // false"banana".endsWith("a"); // true"banana".endsWith("ana"); // true"banana".endsWith("an", 2); // false"banana".endsWith("an", 3); // true |
| 11 | substring() [ES1] | string.substring(startPosition, endPosition) = Extracted part of the string.– startPosition: Required. // From index 0 – endPosition: Optional. (up to, but not including) // Default is the rest of the string from startPosition. If startPosition is greater than endPosition then arguments are swapped: (4, 1) = (1, 4) | "banana".substring(1, 3); // 'an'"banana".substring(1, 4); // 'ana'"banana".substring(4, 1); // 'ana'"banana".substring(2); // 'nana'"banana".substring(); // 'banana'"banana".substring('abcd'); // 'banana' |
| 12 | slice() [ES1] | string.slice(startPosition, endPosition) = Extracted part of the string.Accepts negative indices. – startPosition: Required. // From index 0. // If Number(startPosition) can not be converted then it will be treated as 0. – endPosition: Optional. // Up to, but not including. // Default is the string length. Returns: The | "banana".slice(1, 3); // 'an'"banana".slice(1, 4); // 'ana'"banana".slice(2); // 'nana'"banana".slice(-4, -1); // 'nan'"banana".slice(-4, -2); // 'na'"banana".slice(-4, ''); // ''"banana".slice(''); // 'banana'"banana".slice('abcd'); // 'banana' |
| 13 | split() [ES1] | string.split(separator, limit) = An array containing the splitted values.– separator: Optional. – limit: Optional. // An integer that limits the number of splits. // Items after the limit are excluded. | "banana".split(); // [banana]"banana".split('a'); // ['b', 'n', 'n', '']“ banana".split('n'); // ['ba', 'a', 'a']"banana".split('n', 1); // ['ba']"banana".split('n', 2); // ['ba', 'a']"banana".split('n', 3); // ['ba', 'a', 'a']"apple,banana,grape".split(","); // ['apple', 'banana', 'grape'] |
| 14 | replace() [ES1] | string.replace(searchValue, newValue) = Replaces a specified value with another value in a string.– searchValue: Required. (value, or regular expression) – newValue: Required. | "Hello, Hello World".replace("Hello", "Hi");// 'Hi, Hello World'"Hello, World".replace("Hello");// 'undefined, World'"Hello, World".replace('', "Hi");// 'HiHello, World'"Hello, World".replace(' ', "World");// 'Hello,WorldWorld' |
| 15 | replaceAll() [ES1] | string.replace(searchValue, newValue) = Replaces all values with another value in a string.– searchValue: Required. (value, or regular expression) – newValue: Required. | "Hello, Hello World".replaceAll("Hello", "Hi"); // 'Hi, Hi World'"Hello, Hello World".replaceAll("Hello");// 'undefined, undefined World'"Hello".replaceAll("", " T ");// ' T H T e T l T l T o T ' |
| 16 | trim() [ES5] | string.trim() = Removes whitespace from both ends of a string. | " Hello ".trim(); // 'Hello'" Hello ".trim(); // 'Hello' |
| 17 | repeat() [ES6] | string.repeat(count) = A new string with a specified number of copies of the original string. | "Hello".repeat(3); // 'HelloHelloHello' |
| 18 | concat() [ES1] | string.concat(string1, string2, ..., stringX) = A new string containing the combined strings. | "Hello".concat(" ", "world", " ", "again");// 'Hello world again' |
Conclusion: By understanding and applying these string methods skillfully, you can efficiently handle and transform text-based data in your JavaScript projects. Experiment with different scenarios to see how these methods can be combined creatively to solve real-world challenges.
Remember, practice is the key! The more you work with strings and their methods, the more confident and proficient you’ll become in working with text-based data in JavaScript. Happy coding!
Visit Techtalkbook to find more related topics.