Get the first N characters of a String in JavaScript

avatar

Borislav Hadzhiev

3 min

banner

Photo from Unsplash

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.

index.js
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:

NameDescription
start indexThe index of the first character to include in the returned substring
end indexThe index of the first character to exclude from the returned substring

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

Make sure to assign the result of calling slice() to a variable as the method doesn't change the original string.
index.js
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.

index.js
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.

index.js
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.

index.js
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:

NameDescription
start indexThe index of the first character to include in the returned substring
end indexThe index of the first character to exclude from the returned substring

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.

The slice and substring methods are similar, however, you should use the slice method because its implementation is more intuitive.

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.
index.js
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.
index.js
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.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.

Copyright ยฉ 2023 Borislav Hadzhiev