JavaScript Slice String: Get 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.

Table Of Contents

Quick Learning
JavaScript slice String Introduction
Syntax Of slice() Method
Slice string example
Conclusion

Quick Learning slice() Method

For a quick learning look at the code below. It quickly covers the basic use of the slice() method. For detailed learning proceed to the next section.

Quick Learning slice() Method

// javascript slice string
var str = "John is learning JavaScript";

// get substring from (5, 10)
var substr = str.slice(5, 10);
console.log(substr); // output: "is le"

// only using start index
// will extract string to the end
substr = str.slice(5);
console.log(substr); // output: "is learning JavaScript"
substr = str.slice(5,);
console.log(substr); // output: "is learning JavaScript"

// negative index
// will extract string from the end
substr = str.slice(-10);
console.log(substr); // output: "JavaScript"
substr = str.slice(-10, -6);
console.log(substr); // output: "Java"

JavaScript slice String

If you want to extract a part of the string between the desired index values, then use the slice() method.

The slice method extracts a part of a string and returns it as a new string, without changing or modifying the original string.

The slice method uses the start and end index as parameters to extract a part of the string.

This is the best way to get a substring from a string. Let's look at an easy example to extract a substring from a string. Later, we will explore this method in detail with its syntax and various examples.

Example

var str = "John is learning JavaScript";

// Extract the string between the index 5 and 16
var subStr = str.slice(5, 16);
console.log(subStr);

Try It

In the above example, we used the slice method to extract a section of string (between the index 5 and 16) and stored it in the variable subStr.

Syntax of slice method

The syntax of slice() method is as follows:

str.slice(startIndex);

str.slice(startIndex, endIndex);

The slice method accepts 2 arguments of which one is optional.

startIndex - This is the first argument of the slice method which specifies the starting index of string extraction.

If only this argument is passed, then the slice method extracts the string from the starting index to the end of the string.

If startIndex is negative then the beginning point for extraction is counted from the end of the string in opposite direction. i.e if startIndex is -5 then starting point of extraction would be str.length - 5.
Example
```
var str = "John is learning JavaScript";

// negative startIndex
console.log(str.slice(-10)); // JavaScript
```
Try It
The default value of startIndex is 0. If startIndex is not provided or it can't be converted to a number then 0 is used by default.
startIndex default value = 0
```
var str = "John is learning JavaScript";

// 0 is used as startIndex
// if startIndex is not provided
// or it can't be converted to a number
console.log(str.slice());
console.log(str.slice("hello"));
console.log(str.slice(NaN));
```
Try It
If the value of startIndex is greater than the length of the string then an empty string is returned.
startIndex greater than the string length
```
var str = "John is learning JavaScript";

// empty string returned
console.log(str.slice(50));
console.log(str.slice(str.length + 1));
```
Try It

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
```
var str = "John is learning JavaScript";

// substring from (start, end)
console.log(str.slice(5, 10));
console.log(str.slice(10, 20));
console.log(str.slice(20, str.length));
```
Try It
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
```
var str = "John is learning JavaScript";

// negative endIndex
console.log(str.slice(5, -3));
console.log(str.slice(10, -5));
console.log(str.slice(-10, -5));
```
Try It
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
```
var str = "John is learning JavaScript";

// 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

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

// javascript slice string
var str = "John is learning JavaScript";

var 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 creation copy of an existing string uses the slice method and passes the full length of the string by specifying startIndex and endIndex.

Example

// javascript slice string example
var str = "John is learning JavaScript";

var 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 to another part of the code in the example.

Example

var str = "John is learning JavaScript";

console.log(str.slice(-25, 40));
console.log(str.slice(-15, -5));
console.log(str.slice(-12, -20));

Conclusion

In this guide on the JavaScript slice string method, you learned how to get a substring from a string without modifying the original string. You have also seen various examples of slicing string using the slice() method.