JavaScript String Functions Cheatsheet

String manipulation is a fundamental skill in JavaScript programming. This comprehensive guide covers all the essential string methods you’ll need for effective string handling in your applications.

Contents

Basic String Operations

Let’s start with the most commonly used string operations that form the foundation of string manipulation.

length Property

While not a function, length is an essential property for working with strings.

const greeting = 'Hello, World!';
console.log(greeting.length);  // 13

charAt() and charCodeAt()

These methods help you work with individual characters in a string.

const str = 'JavaScript';
console.log(str.charAt(0));      // 'J'
console.log(str.charCodeAt(0));  // 74 (ASCII code for 'J')

String Transformation

These methods help you modify and transform strings into new forms.

toLowerCase() and toUpperCase()

Essential methods for case transformation:

const text = 'Hello World';
console.log(text.toLowerCase());  // 'hello world'
console.log(text.toUpperCase());  // 'HELLO WORLD'

trim(), trimStart(), and trimEnd()

Remove whitespace from strings:

const text = '   Hello World   ';
console.log(text.trim());      // 'Hello World'
console.log(text.trimStart()); // 'Hello World   '
console.log(text.trimEnd());   // '   Hello World'

padStart() and padEnd()

Add padding to achieve a desired string length:

const num = '42';
console.log(num.padStart(5, '0'));  // '00042'
console.log(num.padEnd(5, '*'));    // '42***'

String Search and Extraction

These methods help you find and extract portions of strings.

indexOf() and lastIndexOf()

Find the position of substrings:

const sentence = 'The quick brown fox jumps over the lazy fox';
console.log(sentence.indexOf('fox'));      // 16
console.log(sentence.lastIndexOf('fox'));  // 40

includes(), startsWith(), and endsWith()

Modern methods for checking string content:

const email = '[email protected]';
console.log(email.includes('@'));        // true
console.log(email.startsWith('user'));   // true
console.log(email.endsWith('.com'));     // true

substring(), slice(), and substr()

Extract portions of strings:

const text = 'JavaScript is awesome';

// substring(startIndex, endIndex)
console.log(text.substring(0, 10));  // 'JavaScript'

// slice(startIndex, endIndex)
console.log(text.slice(-7));         // 'awesome'

// substr(startIndex, length) - deprecated but still supported
console.log(text.substr(0, 4));      // 'Java'

String Splitting and Joining

split()

Split a string into an array:

const csvData = 'John,Doe,30,Developer';
const dataArray = csvData.split(',');
console.log(dataArray);  // ['John', 'Doe', '30', 'Developer']

const sentence = 'The quick brown fox';
const words = sentence.split(' ');
console.log(words);      // ['The', 'quick', 'brown', 'fox']

concat()

Join strings together (though template literals are often preferred):

const firstName = 'John';
const lastName = 'Doe';

// Using concat
console.log(firstName.concat(' ', lastName));  // 'John Doe'

// Modern approach using template literals
console.log(`${firstName} ${lastName}`);       // 'John Doe'

Regular Expression Methods

These methods work with regular expressions for powerful string manipulation.

match(), matchAll()

Find all matches in a string:

const text = 'The rain in Spain stays mainly in the plain';
const matches = text.match(/ain/g);
console.log(matches);  // ['ain', 'ain', 'ain']

// Using matchAll (returns an iterator)
const matchIterator = text.matchAll(/ain/g);
console.log([...matchIterator]);  // Array of match objects

replace() and replaceAll()

Replace text in strings:

const text = 'Hello World! Hello JavaScript!';
console.log(text.replace('Hello', 'Hi'));      // 'Hi World! Hello JavaScript!'
console.log(text.replaceAll('Hello', 'Hi'));   // 'Hi World! Hi JavaScript!'

search()

Find the position of a regular expression match:

const text = 'The quick brown fox';
console.log(text.search(/[aeiou]/));  // 2 (position of first vowel)

Modern String Methods

These are newer additions to JavaScript that provide useful functionality.

repeat()

Repeat a string multiple times:

const star = '*';
console.log(star.repeat(5));  // '*****'

const indent = ' '.repeat(4) + 'Text';
console.log(indent);  // '    Text'

at()

Access characters using positive and negative indices:

const str = 'JavaScript';
console.log(str.at(0));   // 'J'
console.log(str.at(-1));  // 't'

Best Practices and Performance Tips

  1. Use template literals for string interpolation instead of concatenation
  2. Consider using includes() instead of indexOf() !== -1
  3. Remember that strings are immutable – methods always return new strings
  4. Use appropriate methods for your use case:
  • startsWith()/endsWith() for prefix/suffix checks
  • includes() for general containment
  • slice() instead of substring() for negative indices
  1. Consider using regular expressions for complex string manipulation

String Method Chaining

You can chain multiple string methods together:

const input = '   HELLO world!   ';
const processed = input
  .trim()
  .toLowerCase()
  .replace('hello', 'hi');
console.log(processed);  // 'hi world!'

Conclusion

JavaScript provides a rich set of string manipulation methods that can handle virtually any text processing need. Understanding these methods will help you write more efficient and maintainable code. Remember that strings are immutable in JavaScript, so all these methods return new strings rather than modifying the original.

Whether you’re working with user input, processing text data, or building string templates, these methods will serve as essential tools in your JavaScript development toolkit. Bookmark this guide for quick reference when working with strings in your projects!