Get the first N characters of a String in JavaScript

Get the first N characters of a String in JavaScript #

To get the first N characters of a String, call the String.slice() method passing it 0 as the first argument and N as the second.

For example, str.slice(0, 2) returns a new string containing the first 2 characters of the original string.

Copied!
const str = 'bobbyhadz.com';

// ✅ get the first 2 characters of a string
const first2 = str.slice(0, 2);
console.log(first2); // 👉️ bo

// ✅ get the first 4 characters of a string
const first4 = str.slice(0, 4);
console.log(first4); // 👉️ bobb

// ✅ get the first 5 characters of a string
const first5 = str.slice(0, 5);
console.log(first5); // 👉️ bobby

The String.slice method extracts a section of a string and returns it, without modifying the original string.

The String.slice() method takes the following arguments:

When only a single argument is passed to the String.slice() method, the slice goes to the end of the string.

Copied!
const str = 'bobbyhadz.com';

const first2 = str.slice(0, 2);
console.log(first2); // 👉️ bo

console.log(str); // 👉️ bobbyhadz.com

If the end index you provide to the String.slice() method is greater than the string's length, the method returns the entire string without throwing an error.

Copied!
const str = 'bobbyhadz.com';

const first100 = str.slice(0, 100);
console.log(first100); // 👉️ bobbyhadz.com

We tried to get the first 100 characters of a string that only contains 13 characters.

As a result, the slice() method returned the whole string.

If you have to do this often, define a reusable function.

Copied!
function getFirstNchars(str, n) {
  return str.slice(0, n);
}

const str = 'bobbyhadz.com';

const first2 = getFirstNchars(str, 2);
console.log(first2); // 👉️ bo

const first4 = getFirstNchars(str, 4);
console.log(first4); // 👉️ bobb

const first5 = getFirstNchars(str, 5);
console.log(first5); // 👉️ bobby

The getFirstNChars function takes a string and N as parameters and returns the first N characters of the string.

Alternatively, you can use the String.substring() method.

Get the first N characters of a String using String.substring() #

To get the first N characters of a String, call the String.substring() method passing it 0 as the first argument and N as the second.

For example, str.substring(0, 2) returns a new string containing the first 2 characters of the original string.

Copied!
function getFirstNchars(str, n) {
  return str.substring(0, n);
}

const str = 'bobbyhadz.com';

const first2 = getFirstNchars(str, 2);
console.log(first2); // 👉️ bo

const first4 = getFirstNchars(str, 4);
console.log(first4); // 👉️ bobb

const first5 = getFirstNchars(str, 5);
console.log(first5); // 👉️ bobby

The String.substring() method returns a slice of the string from the start index to the excluding end index.

The method takes the following parameters:

If no end index is specified the slice goes to the end of the string.

We used the substring() method in the same way as we used the slice() method to get the first N characters of a string.

There are a couple of differences between the String.substring() and the String.slice() methods:

• The substring() method swaps its start and end index if the start index is greater than the end index. The slice() method returns an empty string in this case.

Copied!
const str = 'bobby';

console.log(str.substring(3, 0)); // 👉️ bob

console.log(str.slice(3, 0)); // 👉️ ''

• If either of both arguments passed to substring() are negative, they are treated as if they were 0.

Copied!
const str = 'bobby';

console.log(str.substring(-3)); // 👉️ bobby

console.log(str.slice(-3)); // 👉️ bby

When given a negative index, the slice() method counts backward from the end of the string to find the indexes.

For these reasons, it is recommended to use the String.slice() method to get the first N characters of a string.

The slice method works in a more predictable manner.