Get the First Three Characters of a String

JavaScript provides several ways to extract the first three characters from a string. Methods such as slice(), substring(), and string indexing can be used depending on the required use case.

• Use slice(0, 3) for a simple and commonly used solution.
• Use substring(0, 3) or substr(0, 3) to extract the first three characters.
• Use array conversion or a loop when character-level processing is required.

Approach 1: Using String.slice() Method

The slice() method extracts a portion of a string using a starting index and an ending index. The ending index is exclusive, so slice(0, 3) returns the first three characters.

Example: In this example, we use slice() to extract the first three characters of the string.

let s = 'Hello, World!';

let res = s.slice(0, 3);

console.log(res);

• slice(0, 3) starts at index 0 and extracts characters up to, but not including, index 3.
• The slice() method does not modify the original string.

Approach 2: Using String.substr() Method

The substr() method extracts a specified number of characters starting from a given index. Although it can be used for this purpose, substr() is a deprecated method and should generally be avoided in new code.

Example: In this example, we use substr() to extract three characters starting from index 0.

let s = 'Hello, World!';

let res = s.substr(0, 3);

console.log(res);

• substr(0, 3) starts at index 0 and extracts 3 characters.
• Unlike slice(), the second argument specifies the number of characters rather than the ending index.

Approach 3: Using String.substring() Method

The substring() method extracts characters between two specified indexes. Similar to slice(), the ending index is exclusive.

Example: In this example, we use substring() to extract the first three characters

let s = 'Hello, World!';

let res = s.substring(0, 3);

console.log(res);

• substring(0, 3) extracts characters from index 0 through index 2.
• Unlike slice(), substring() treats negative arguments as 0 and swaps the arguments when the first index is greater than the second.

Approach 4: Using Array Conversion and slice()

A string can be converted into an array of characters using the spread operator. The array slice() method can then be used to extract the first three characters and join() can convert them back into a string.

Example: In this example, we convert the string into an array and extract its first three characters.

let s = 'Hello, World!';

let res = [...s].slice(0, 3).join('');

console.log(res);

• The [...str] syntax converts the string into an array of characters.
• slice(0, 3) slices the first three characters, and join('') joins the array back into a string.

• [...s] converts the string into an array of characters.
• slice(0, 3) extracts the first three elements.
• join('') combines them back into a string.

Approach 5: Using String Indexing with a Loop

The first three characters can also be retrieved manually by accessing the characters at indexes 0, 1, and 2.

Example: In this example, a loop iterates through the first three indexes and builds the resulting string.

let s = 'Hello, World!';
let res = '';
for (let i = 0; i < 3; i++) {
    res += s[i];
}
console.log(res);

• The loop iterates from index 0 to 2.
• Each character is appended to the result string.
• This approach is more verbose than using slice().

Choosing the Appropriate Approach