Tutorials Tonight
Follow Us

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);
▶ Try It

In the above example, we used the slice method to extract a section of string and you can see the original string is unmodified.

javascript slice string example

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

    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

    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

  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

    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

    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";
    
    console.log(str.slice(5)); // endIndex not given
    console.log(str.slice(0, 100)); // endIndex greater than str.length
    
    console.log(str.slice(5, "hello")); // endIndex can't be converted to a number
    console.log(str.slice(5, NaN)); // endIndex not a number
    ▶ 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

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:

  1. The slice method starts index and ends index to extract a part of a string without modifying the original string.
  2. Using the slice method you can also create a copy of a string.
Follow Us

Copyright © Tutorials Tonight. All Rights Are Reserved.