JavaScript String Extraction Methods

JavaScript provides several methods to extract parts of strings, which can be divided into two main categories: string extraction methods and character extraction methods.

Key Point: All extraction methods return new values and do not modify the original string, as strings in JavaScript are immutable.

String Extraction Methods

There are three main methods for extracting substrings: slice(), substr(), and substring().

0: ‘f’
1: ‘i’
2: ‘r’
3: ‘s’
4: ‘t’
5: ‘,’
6: ‘ ‘
7: ‘s’
8: ‘e’
9: ‘c’
10: ‘o’
11: ‘n’
12: ‘d’
13: ‘,’
14: ‘ ‘
15: ‘t’
16: ‘h’
17: ‘i’
18: ‘r’
19: ‘d’
20: ‘,’
21: ‘ ‘
22: ‘f’
23: ‘o’
24: ‘u’
25: ‘r’
26: ‘t’
27: ‘h’

The slice() Method

Using the slice() Method

// Define a string
let str = 'first, second, third, fourth';

// slice() with only start index
console.log(str.slice(10)); // 'second, third, fourth'

// slice() with negative start index
console.log(str.slice(-10)); // 'rd, fourth'

// slice() with start and end index
console.log(str.slice(10, 15)); // 'secon' (end index is exclusive)

// slice() with negative start and end indices
console.log(str.slice(-10, -5)); // 'rd, f'

The substr() Method

Using the substr() Method

// substr() with only start index
console.log(str.substr(10)); // 'second, third, fourth'

// substr() with negative start index
console.log(str.substr(-10)); // 'rd, fourth'

// substr() with start index and length
console.log(str.substr(10, 4)); // 'secO' (4 characters from position 10)

// substr() with negative start index and length
console.log(str.substr(-5, 4)); // 'four' (4 characters from 5th position from end)

The substring() Method

Using the substring() Method

// substring() with only start index
console.log(str.substring(10)); // 'second, third, fourth'

// substring() with start and end index
console.log(str.substring(10, 15)); // 'secon' (end index is exclusive)

// substring() with negative index (treated as 0)
console.log(str.substring(-10)); // Returns the whole string

// substring() with equal start and end indices
console.log(str.substring(3, 3)); // '' (empty string)

Comparison: slice() vs substr() vs substring()

Method Parameters Accepts Negative Indices Second Parameter
slice() start, end Yes End index (exclusive)
substr() start, length Yes Number of characters
substring() start, end No End index (exclusive)

Character Extraction Methods

Using charAt() and charCodeAt()

let shortStr = 'First Second';

// charAt() returns the character at specified position
console.log(shortStr.charAt(3)); // 's'
console.log(shortStr.charAt()); // 'F' (defaults to index 0)

// charCodeAt() returns the UTF-16 code unit
console.log(shortStr.charCodeAt(3)); // 115 (Unicode for 's')
console.log(shortStr.charCodeAt()); // 70 (Unicode for 'F')

// Array-like character access (not a method)
console.log(shortStr[2]); // 'r'

Practice Questions

Question 1: What will be the output?

let str = 'hello world';
console.log(str.slice(-5, -2));

Answer: The output will be “wor”. It starts from the 5th position from the end (“w”) and ends at the 2nd position from the end (before “l”).

Question 2: Difference between substring() and substr()

Answer: The main differences are:

  • substring() takes start and end indices, while substr() takes start index and length
  • substring() doesn’t accept negative indices, while substr() does
  • substring() will swap parameters if start > end, while substr() treats negative start as length + start

Question 3: What will be the output?

let str = 'testing';
console.log(str.substring(-3));

Answer: The output will be “testing”. Since substring() doesn’t accept negative indices, it treats -3 as 0 and returns the whole string.

Question 4: What will be the output?

let str = 'testing';
console.log(str.substring(3, 3));

Answer: The output will be an empty string “”. When start and end indices are equal, no characters are extracted.

Question 5: What will be the output?

let str = 'testing';
console.log(str.charAt());

Answer: The output will be “t”. When no index is provided to charAt(), it defaults to index 0.

Best Practices

  • Use slice() when you need to work with negative indices
  • Use substring() when you need simple extraction with positive indices
  • Use substr() when you need to extract a specific number of characters
  • Use charAt() for character extraction instead of array notation for better browser compatibility
  • Remember that all these methods return new strings and don’t modify the original