JavaScript Strings Cheatsheet
š¤ JavaScript Strings Cheatsheet
Strings are one of the most common data types in JavaScript.
They are immutable sequences of characters, and JavaScript provides many built-in methods for searching, slicing, transforming, and combining them.
ā String properties and methods ā Template literals ā Accessing characters ā Searching ā Extracting substrings ā Splitting and joining ā Replacing ā Case and whitespace ā Padding and repeating
#javascript #strings #templateliterals #slice #replace #split #trim #padstart #regex #webdev
String properties and methods
| Method | Description |
|---|---|
.length | Returns the number of characters in the string. |
.at() | Returns the character at an index, supporting negative indices. |
.charAt() | Returns the character at a specified index. |
.concat() | Joins two or more strings. |
.includes() | Checks if a substring exists. |
.indexOf() | Returns the first index of a substring. |
.lastIndexOf() | Returns the last index of a substring. |
.startsWith() | Checks if the string starts with a substring. |
.endsWith() | Checks if the string ends with a substring. |
.slice() | Extracts a portion of the string. |
.substring() | Extracts characters between two indices. |
.substr() | Extracts a substring from a start index and length. |
.split() | Splits the string into an array. |
.replace() | Replaces the first match. |
.replaceAll() | Replaces all matches. |
.toLowerCase() | Converts to lowercase. |
.toUpperCase() | Converts to uppercase. |
.trim() | Removes whitespace from both ends. |
.trimStart() | Removes whitespace from the start. |
.trimEnd() | Removes whitespace from the end. |
.padStart() | Pads the start to a target length. |
.padEnd() | Pads the end to a target length. |
.repeat() | Repeats the string a number of times. |
.match() | Matches a string against a regex. |
.search() | Returns the index of the first regex match. |
.localeCompare() | Compares two strings in locale order. |
Template literals
Use backticks for interpolation and multi-line strings.
const name = "Eric";
const message = `Hello, ${name}!`;
const multi = `
Line 1
Line 2
`;Accessing characters
.length
Returns the number of characters in the string.
"hello".length; // 5.at()
Returns the character at an index, supporting negative indices.
"hello".at(1); // "e"
"hello".at(-1); // "o".charAt()
Returns the character at a specified index like .at(), but does not support negative indices.
"hello".charAt(0); // "h"Searching
.includes()
Checks if a substring exists.
"hello world".includes("world"); // true
"hello world".includes("foo"); // false.indexOf()
Returns the first index of a substring, or -1 if not found.
"hello world".indexOf("o"); // 4
"hello world".indexOf("z"); // -1.lastIndexOf()
Returns the last index of a substring, or -1 if not found.
"hello world".lastIndexOf("o"); // 7
"hello world".lastIndexOf("z"); // -1.startsWith() / .endsWith()
Check the beginning or end of a string.
"hello world".startsWith("hello"); // true
"hello world".endsWith("world"); // trueExtracting substrings
.slice()
Extracts a portion of the string. Supports negative indices.
"hello world".slice(0, 5); // "hello"
"hello world".slice(-5); // "world".substring()
Extracts characters between two indices. Negative indices are treated as 0.
"hello world".substring(0, 5); // "hello".substr()
Extracts a substring from a start index and length. Supports negative start indices.
"hello world".substr(6, 5); // "world"
"hello world".substr(-5); // "world"Splitting and joining
.split()
Splits the string into an array.
"foo,bar,baz".split(","); // ["foo", "bar", "baz"]
"hello".split(""); // ["h", "e", "l", "l", "o"].concat()
Joins two or more strings.
"Hello".concat(", ", "world"); // "Hello, world"Replacing
.replace()
Replaces the first match. Replaces all matches with the global flag (g).
"abc".replace("a", "A"); // "Abc"
"abc abc".replace(/a/g, "A"); // "Abc Abc".replaceAll()
Replaces all matches.
"abc abc".replaceAll("a", "A"); // "Abc Abc"Case and whitespace
.toUpperCase() / .toLowerCase()
Convert case.
"hello".toUpperCase(); // "HELLO"
"WORLD".toLowerCase(); // "world".trim()
Removes whitespace from both ends.
" trim ".trim(); // "trim".trimStart() / .trimEnd()
Remove whitespace from one end of the string.
" trim ".trimStart(); // "trim "
" trim ".trimEnd(); // " trim"Padding and repeating
.padStart() / .padEnd()
Pad a string to a target length.
"5".padStart(3, "0"); // "005"
"5".padEnd(3, "0"); // "500".repeat()
Repeats the string.
"ha".repeat(3); // "hahaha"Matching and searching with regex
.match()
Matches a string against a regular expression.
"hello 123".match(/\d+/); // ["123"]
"abc abc".match(/a/g); // ["a", "a"].search()
Returns the index of the first regex match, or -1 if not found.
"hello 123".search(/\d/); // 6
"hello".search(/z/); // -1.localeCompare()
Compares two strings in locale order. Returns a negative number if the string comes first, zero if equal, positive if it comes after.
"a".localeCompare("b"); // -1
"b".localeCompare("a"); // 1
"a".localeCompare("a"); // 0Full-Stack AI Developer Roadmap
From HTML & CSS to working with AI models, all in one structured roadmap.