Cutting Up Strings in JavaScript

Ever been confused about all the different ways to chop up strings in JavaScript? You’re not alone! I’ve spent more hours than I’d like to admit trying to remember which method does what.

JavaScript gives us three main ways to grab parts of strings: substring(), substr(), and slice(). They might look similar at first glance, but they each behave a bit differently.

The String-Chopping Trio: A Quick Look

Before we dive into the nitty-gritty, here’s a cheat sheet I wish I had when I was learning:

Let’s look at how each one works in the real world.

The substring() Method

The substring() method extracts characters between two specified indices (positions) in a string.

Syntax and Parameters

string.substring(startIndex, endIndex);

• startIndex: The position where extraction begins (inclusive)
• endIndex: The position where extraction ends (exclusive)

If endIndex is omitted, extraction continues to the end of the string.

Examples

const greeting = 'Hello, world!';

// Basic usage
console.log(greeting.substring(0, 5)); // "Hello"
console.log(greeting.substring(7, 12)); // "world"

// Omitting endIndex
console.log(greeting.substring(7)); // "world!"

// If start > end, they are swapped
console.log(greeting.substring(5, 0)); // "Hello" (same as substring(0, 5))

// Negative or NaN values are treated as 0
console.log(greeting.substring(-3, 5)); // "Hello" (same as substring(0, 5))

Special Behaviors

• If startIndex equals endIndex, it returns an empty string
• If startIndex > endIndex, the two values are swapped
• Any negative index is treated as 0

The substr() Method

The substr() method returns a portion of a string starting at a specified index and extending for a given number of characters.

⚠️ Note: This method is considered legacy and might be removed from future JavaScript implementations. When possible, use substring() or slice() instead.

Syntax and Parameters

string.substr(start, length);

• start: The index where extraction begins
• length: The number of characters to extract

If length is omitted, extraction continues to the end of the string.

Examples

const greeting = 'Hello, world!';

// Basic usage
console.log(greeting.substr(0, 5)); // "Hello"
console.log(greeting.substr(7, 5)); // "world"

// Omitting length
console.log(greeting.substr(7)); // "world!"

// Negative start index counts from the end
console.log(greeting.substr(-6, 5)); // "world"

Special Behaviors

• If start is negative, counting begins from the end of the string
• If length is negative or 0, it returns an empty string

The slice() Method

The slice() method extracts a section of a string and returns it as a new string without modifying the original.

Syntax and Parameters

string.slice(startIndex, endIndex);

• startIndex: The position where extraction begins (inclusive)
• endIndex: The position where extraction ends (exclusive)

If endIndex is omitted, extraction continues to the end of the string.

Examples

const greeting = 'Hello, world!';

// Basic usage
console.log(greeting.slice(0, 5)); // "Hello"
console.log(greeting.slice(7, 12)); // "world"

// Omitting endIndex
console.log(greeting.slice(7)); // "world!"

// Using negative indices
console.log(greeting.slice(-6, -1)); // "world"
console.log(greeting.slice(-6)); // "world!"

Special Behaviors

• If startIndex or endIndex is negative, counting begins from the end of the string
• If startIndex > endIndex, it returns an empty string (unlike substring())

Choosing the Right Method

Here are some guidelines for selecting the appropriate string manipulation method:

1. Use slice() when:

   • You need to support negative indices
   • You want consistent behavior similar to array manipulation methods
   • You need the most versatile option

2. Use substring() when:

   • You want automatic handling of out-of-order indices
   • You need to convert negative indices to 0

3. Avoid substr() when possible since it’s deprecated, but it can be useful for:

   • Legacy code compatibility
   • When you specifically need to extract based on a length parameter

Practical Examples

Working with User Input

function extractUsername(email) {
  // Extract everything before the @ symbol
  return email.substring(0, email.indexOf('@'));
}

console.log(extractUsername('user@example.com')); // "user"

Truncating Text with Ellipsis

function truncateText(text, maxLength) {
  if (text.length <= maxLength) return text;
  return text.slice(0, maxLength) + '...';
}

console.log(truncateText('JavaScript is amazing', 10)); // "JavaScript..."

Extracting File Extensions

function getFileExtension(filename) {
  return filename.slice(filename.lastIndexOf('.'));
}

console.log(getFileExtension('document.pdf')); // ".pdf"

Conclusion

Understanding the differences between substring(), substr(), and slice() helps you choose the most appropriate method for your specific string manipulation needs. While slice() is generally the most versatile and recommended method, each has its place depending on your requirements.

Remember that substr() is considered legacy, so it’s best to use substring() or slice() in new code for better future compatibility.