Last updated: Mar 1, 2024
Reading timeยท3 min
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.
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:
Name | Description |
---|---|
start index | The index of the first character to include in the returned substring |
end index | The 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.
slice()
to a variable as the method doesn't change the original string.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.
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.
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.
String.substring()
Alternatively, you can use the String.substring()
method.
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:
Name | Description |
---|---|
start index | The index of the first character to include in the returned substring |
end index | The 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.
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:
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.const str = 'bobby'; console.log(str.substring(3, 0)); // ๐๏ธ bob console.log(str.slice(3, 0)); // ๐๏ธ ''
substring()
are negative, they are
treated as if they were 0
.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.
You can learn more about the related topics by checking out the following tutorials: