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.

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.

1. 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

   ▶ Try It Run Here

   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));

   ▶ Try It Run Here

   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));

   ▶ Try It Run Here

---

2. 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));

   ▶ Try It Run Here

   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));

   ▶ Try It Run Here

   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));

   ▶ Try It Run Here

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.

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.

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.

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));