📚 Mastering JavaScript String Methods and Properties
Strings are one of the most fundamental data types in JavaScript, and mastering their methods can significantly improve your code quality, readability, and performance.
In this guide, we'll go through every essential string method and property you need to know in modern JavaScript. You'll learn what each method does, how to use it, and whether it's useful in contexts beyond strings — like arrays, objects, or regular expressions.
🧠 Why Learn String Methods?
- ✅ Make your code more expressive and clean
- 🛠️ Solve common text manipulation problems
- 💡 Better understand JavaScript's built-in functions
- 🧩 Work more easily with arrays, inputs, and file data
📋 All String Methods and Properties in One Place
| 🔤 Method/Property | 📌 What It Does | 💻 Usage | 🔁 Context |
|---|---|---|---|
length |
Returns the number of characters | "abc".length // 3 |
✅ Also in arrays |
charAt(n) |
Character at position n
|
"hello".charAt(1) // 'e' |
❌ |
at(n) |
Like charAt() but supports negative indexes |
"hello".at(-1) // 'o' |
✅ Also in arrays |
codePointAt(n) |
Returns Unicode code point | "🌍".codePointAt(0) |
❌ |
fromCharCode(n) |
Creates string from char code |
String.fromCharCode(97) → 'a'
|
❌ |
fromCodePoint(n) |
Unicode-safe version |
String.fromCodePoint(128512) → 😀 |
❌ |
concat() |
Joins strings together | "a".concat("b") // "ab" |
✅ In arrays too |
includes() |
Checks if text exists inside | "abc".includes("b") // true |
✅ |
startsWith() |
Checks if string starts with | "abc".startsWith("a") // true |
✅ |
endsWith() |
Checks if string ends with | "abc".endsWith("c") // true |
✅ |
indexOf() |
Finds position of first match | "banana".indexOf("a") // 1 |
✅ In arrays |
lastIndexOf() |
Finds last match position | "banana".lastIndexOf("a") // 5 |
✅ |
slice(start, end) |
Extracts part of the string | "abcde".slice(1, 4) // 'bcd' |
✅ In arrays |
substring(start, end) |
Like slice, no negatives |
"abcde".substring(1, 4) |
❌ |
split(sep) |
Converts string to array | "a,b,c".split(',') // ['a', 'b', 'c'] |
✅ |
trim() |
Removes spaces at both ends | " hello ".trim() |
❌ |
trimStart() |
Removes start spaces only | " hello".trimStart() |
❌ |
trimEnd() |
Removes end spaces only | "hello ".trimEnd() |
❌ |
toLowerCase() |
Converts to lowercase | "HELLO".toLowerCase() |
❌ |
toUpperCase() |
Converts to uppercase | "hello".toUpperCase() |
❌ |
normalize() |
Unicode normalization (accents, etc) | "café".normalize("NFD") |
❌ |
repeat(n) |
Repeats string n times |
"ha".repeat(3) // 'hahaha' |
❌ |
replace(old, new) |
Replaces first match | "hello".replace("l", "r") // 'herlo' |
✅ With RegExp |
replaceAll(old, new) |
Replaces all matches | "lol".replaceAll("l", "x") // 'xox' |
✅ |
match(regex) |
Returns match with regex | "abc123".match(/\d+/) // ['123'] |
✅ |
matchAll(regex) |
All matches (iterable) | [..."ab1cd2".matchAll(/\d/g)] // [["1"],["2"]] |
✅ |
search(regex) |
Index of match by regex | "abc123".search(/\d/) // 3 |
✅ |
padStart(len, str) |
Pads at start | "5".padStart(3, "0") // '005' |
❌ |
padEnd(len, str) |
Pads at end | "5".padEnd(3, "0") // '500' |
❌ |
localeCompare(str) |
Compares respecting locale | "a".localeCompare("b") // -1 |
❌ |
toString() |
Converts to string | (123).toString() // "123" |
✅ Works on all types |
valueOf() |
Returns primitive string | new String("x").valueOf() // "x" |
✅ |
🔁 Context Explained
The Context column indicates whether a method or property is exclusive to strings or also available in other data types like arrays, numbers, or objects.
- ✅ means the method/property is used in other contexts beyond strings (e.g.
lengthis also in arrays,toString()works on numbers, booleans, etc).- ❌ means it is string-only and won’t work on other types.
✅ Bonus: Common Patterns
// 🔍 Capitalize first letter
const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1);
// 🔄 Convert CSV to array
const csv = "name,age,city";
const headers = csv.split(","); // ["name", "age", "city"]
// 🧼 Clean and normalize
const clean = str => str.trim().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
🧾 Conclusion
JavaScript strings are far more powerful than just storing text. With these methods, you can:
- ✨ Format user input
- 🔍 Parse files and API data
- 🔄 Convert data types
- 📏 Validate and clean text
- 🔐 Work securely with Unicode and international characters
Mastering these string tools gives you a solid foundation for any frontend or backend project. Bookmark this guide, and practice each method in your browser console or your favorite editor!
Top comments (0)