Last updated: Mar 1, 2024
Reading timeยท5 min
String.slice()
String.substring()
String.slice()
To remove the first N characters from a string, call the slice()
method,
passing it N as an argument.
For example, const removeFirst2 = str.slice(2);
removes the first 2
characters from the string.
const str = 'bobbyhadz.com'; // โ remove the first 2 characters from a string const removeFirst2 = str.slice(2); console.log(removeFirst2); // ๐๏ธ bbyhadz.com // โ remove the first 3 characters from a string const removeFirst3 = str.slice(3); console.log(removeFirst3); // ๐๏ธ byhadz.com
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.
0
and the last character has an index of str.length - 1
.For example, to remove the first 2 characters from a string, you would specify a
start index of 2
.
const str = 'bobbyhadz.com'; const removeFirst2 = str.slice(2); console.log(removeFirst2); // ๐๏ธ bbyhadz.com
A start index of 2
excludes the first 2 characters from the result because the
new slice skips the characters at indexes 0
and 1
.
Similarly, to remove the first characters from the string, use a start index of
3
.
const str = 'bobbyhadz.com'; const removeFirst3 = str.slice(3); console.log(removeFirst3); // ๐๏ธ byhadz.com
The new slice doesn't contain the first 3 characters of the original string
(indexes 0
, 1
and 2
).
Note that the String.slice()
method doesn't change the original string, it
returns a new string. Strings are immutable in JavaScript.
const str = 'bobbyhadz.com'; const removeFirst2 = str.slice(2); console.log(removeFirst2); // ๐๏ธ bbyhadz.com console.log(str); // ๐๏ธ bobbyhadz.com
The original string remains unchanged after calling slice()
.
If you try to remove more characters than there are in the string, the slice()
method returns an empty string.
const str = 'bobbyhadz.com'; const removeFirst100 = str.slice(100); console.log(removeFirst100); // ๐๏ธ ""
We tried to remove the first 100 characters from a string that only contains 13
characters, so the slice()
method returned an empty string.
If you have to do this often, define a reusable function.
function removeFirstN(str, n) { return str.slice(n); } const str = 'bobbyhadz.com'; console.log(removeFirstN(str, 2)); // ๐๏ธ bbyhadz.com console.log(removeFirstN(str, 3)); // ๐๏ธ byhadz.com
The removeFirstN
function takes a string and n
as parameters and removes the
first N characters from the string.
String.substring()
Alternatively, you can use the String.substring()
method.
const str = 'bobbyhadz.com'; const removeFirst2 = str.substring(2); console.log(removeFirst2); // ๐๏ธ bbyhadz.com const removeFirst3 = str.substring(3); console.log(removeFirst3); // ๐๏ธ byhadz.com
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 slice()
and substring()
methods in a similar way to remove the
first N characters from a string.
However, 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.
The slice()
method is implemented more intuitively and should be your
approach.
Use the String.replace()
method to remove the first N characters from a string
conditionally.
The method will only remove the first N characters from the string if the string starts with the specified characters.
const str = 'bobbyhadz.com'; // โ remove the first 2 characters from a string conditionally const removeFirst2 = str.replace(/^bo/, ''); console.log(removeFirst2); // ๐๏ธ bbyhadz.com // โ remove the first 3 characters from a string conditionally const removeFirst3 = str.replace(/^bob/, ''); console.log(removeFirst3); // ๐๏ธ byhadz.com
The String.replace() method returns a new string with one, some, or all matches of a regular expression replaced with the provided replacement.
The method takes the following parameters:
Name | Description |
---|---|
pattern | The pattern to look for in the string. Can be a string or a regular expression. |
replacement | A string used to replace the substring match by the supplied pattern. |
The first argument we passed to the String.replace()
method is a regular
expression.
The forward slashes / /
mark the beginning and end of the regular expression.
const str = 'bobbyhadz.com'; const removeFirst2 = str.replace(/^bo/, ''); console.log(removeFirst2); // ๐๏ธ bbyhadz.com
The caret ^
matches the beginning of the input.
We specified the characters bo
in the example.
In other words, the bo
characters are only matched if they are at the
beginning of the string.
We replace the match with an empty string in order to remove the characters.
If the string doesn't start with the specified characters, the entire string is returned as is.
const str = 'bobbyhadz.com'; const result = str.replace(/^xyz/, ''); console.log(result); // ๐๏ธ bobbyhadz.com
The String.replace()
method returns a new string with the matches of the
pattern replaced. The method doesn't change the original string.
Strings are immutable in JavaScript.
You can learn more about the related topics by checking out the following tutorials: