JavaScipt Slice String: Extract Substring From The String
In this tutorial, you will learn how to extract a substring from a string using the slice() method with various examples.
slice String JavaScipt
If you want to extracts a part of the string between the desired index values, then use the slice method.
The slice method extract a part of a string and returns it as a new string, without changing or modifying the original string.
Example
let str = "Learning to code is learning to create and innovate";
console.log(str.slice(12));
// original string remain same
console.log(str);
In the above example, we used the slice method to extract a section of string and you can see the original string is unmodified.

Syntax of slice method
The syntax of slice() method is as follows:
string.slice(beginIndex [ ,endIndex]);
The slice method accepts 2 arguments of which one is optional.
-
beginIndex - This is the first argument of the slice method which specifies the beginning index of string extraction. If beginIndex is negative then the beginning point for extraction is counted from the end of the string in opposite direction. i.e if beginIndex is -5 then starting point of extraction would be str.length - 5.
Example
let str = "Learning to code is learning to create and innovate"; console.log(str.slice(-8)); // innovate
The default value of beginIndex is 0. If beginIndex is not provided or it can't be converted to a number then 0 is used.
beginIndex default value = 0
let str = "Learning to code is learning to create and innovate"; // 0 is used as beginIndex console.log(str.slice()); console.log(str.slice("hello")); console.log(str.slice(NaN));
If the value of beginIndex is greater than the length of the string then an empty string is returned.
beginIndex greater than string length
let str = "Learning to code is learning to create and innovate"; // empty string returned console.log(str.slice(100)); console.log(str.slice(str.length + 1));
-
endIndex (Optional) - This is an optional value in the slice method. It represents the end index of the extraction string. The last index is not included in the extraction. i.e if you mention
str.slice(2, 5)
then it extracts index 2, 3 and 4.Example
let str = "Learning to code is learning to create and innovate"; console.log(str.slice(2, 10)); console.log(str.slice(10, 20)); console.log(str.slice(10, str.length));
If the endIndex is negative then the ending point for extraction is counted from the end of the string in opposite direction. i.e if endIndex is -4 then the ending point of extraction would be str.length - 4.
Example
let str = "Learning to code is learning to create and innovate"; console.log(str.slice(5, -3)); console.log(str.slice(10, -5)); console.log(str.slice(-10, -5));
If the endIndex is not specified, greater than the length of the string then the slice method extracts to the end of the string.
And if endIndex can't be converted to a number then it returns an empty string.
Example
let str = "Learning to code is learning to create and innovate"; // endIndex not given console.log(str.slice(5)); // endIndex greater than str.length console.log(str.slice(0, 100)); // endIndex can't be converted to a number console.log(str.slice(5, "hello")); // endIndex not a number console.log(str.slice(5, NaN));
Slice String Examples
Let's see some interesting examples of slicing string using the slice() method.
# Example 1: Creating new strings
The following example uses the slice method to extract part of a string and create a new string.
Example
let str = "Learning to code is learning to create and innovate";
let str1 = str.slice(5),
str2 = str.slice(1, 10),
str3 = str.slice(5, -3),
str4 = str.slice(100),
str5 = str.slice(0);
console.log(str1);
console.log(str2);
console.log(str3);
console.log(str4);
console.log(str5);
# Example 2: Creating a copy of a string
The create copy of an existing string use the slice method and pass the full length of the string by specifying beginIndex and endIndex.
Example
let str = "Learning to code is learning to create and innovate";
let copy1 = str.slice(),
copy2 = str.slice(0),
copy3 = str.slice(0, str.length),
copy4 = str.slice(-str.length),
copy5 = str.slice(-str.length, str.length);
console.log(copy1);
console.log(copy2);
console.log(copy3);
console.log(copy4);
console.log(copy5);
# Example 3: slice method with negative indexes
The following example uses negative indexes in the slice method.
The example counts backward from the end of the string by 15 to find the start index and forwards from the start index by 20 to find the end index of the extraction string. And similar in another part of the code in the example.
Example
let str = "Learning to code is learning to create and innovate";
console.log(str.slice(-25, 40));
console.log(str.slice(-15, -5));
console.log(str.slice(-12, -20));
Points to remember:
- The slice method starts index and ends index to extract a part of a string without modifying the original string.
- Using the slice method you can also create a copy of a string.