JavaScript | Difference between String.slice and String.substring

21 Apr, 2022
These 2 functions are quite similar in their Syntax But are different in some cases. Let’s see difference between them.
slice():This method selects the part of a string and returns the selected part as a new string. Start and end parameters are used to specify the extracted part.The first character starts with index 0.Syntax:str.slice(start, end)
Parameter:start:This parameter is required. It specifies the position from where to start the extraction. First character starts at position 0.end:This parameter is optional. The position (up to, but excluding) where to stop the selection. If parameter is omitted, function selects all characters from the start parameter till the end of the string.substring():This function have the same syntax as of slice()This method selects the part of a string and returns the selected part as a new string. Start and end parameters are used to specify the extracted part.The first character starts with index 0.Syntax:str.substring(start, end)
Parameter:start:This parameter is required. It specifies the position from where to start the extraction. First character starts at position 0.end:This parameter is optional. The position (up to, but excluding) where to stop the selection. If parameter is omitted, function selects all characters from the start parameter till the end of the string.
slice():This method selects the part of a string and returns the selected part as a new string. Start and end parameters are used to specify the extracted part.The first character starts with index 0.Syntax:str.slice(start, end)
Parameter:start:This parameter is required. It specifies the position from where to start the extraction. First character starts at position 0.end:This parameter is optional. The position (up to, but excluding) where to stop the selection. If parameter is omitted, function selects all characters from the start parameter till the end of the string.
Syntax:
str.slice(start, end)

Parameter:
start:This parameter is required. It specifies the position from where to start the extraction. First character starts at position 0.
end:This parameter is optional. The position (up to, but excluding) where to stop the selection. If parameter is omitted, function selects all characters from the start parameter till the end of the string.
substring():This function have the same syntax as of slice()This method selects the part of a string and returns the selected part as a new string. Start and end parameters are used to specify the extracted part.The first character starts with index 0.Syntax:str.substring(start, end)
Parameter:start:This parameter is required. It specifies the position from where to start the extraction. First character starts at position 0.end:This parameter is optional. The position (up to, but excluding) where to stop the selection. If parameter is omitted, function selects all characters from the start parameter till the end of the string.
Syntax:
str.substring(start, end)

Parameter:
start:This parameter is required. It specifies the position from where to start the extraction. First character starts at position 0.
end:This parameter is optional. The position (up to, but excluding) where to stop the selection. If parameter is omitted, function selects all characters from the start parameter till the end of the string.
Common ResultBoth give same results in the given cases.
If start == stop, both returns an empty stringIf stop is omitted, both extracts characters till the end of the stringIf any argument is greater than the string’s length, the string’s length will be used in that case.
If start == stop, both returns an empty string
If stop is omitted, both extracts characters till the end of the string
If any argument is greater than the string’s length, the string’s length will be used in that case.
substring()Separate results of substring()
If start > stop, then function swaps both arguments.If any argument is negative or is NaN, it is treated as 0.
If start > stop, then function swaps both arguments.
If any argument is negative or is NaN, it is treated as 0.
slice()Separate results of slice()
If start > stop, This function will return an empty string. (“”)If start is negative, It sets char from the end of string, like substr().If stop is negative, It sets stop = string.length – Math.abs(stop) (original value)
If start > stop, This function will return an empty string. (“”)
If start is negative, It sets char from the end of string, like substr().
If stop is negative, It sets stop = string.length – Math.abs(stop) (original value)
Here are a few of the examples.Example-1: This examples give the same results in both the cases.
<!DOCTYPE html><html>  <head>    <title>        JavaScript |       difference between String.slice and       String.substring    </title></head>  <body style="text-align:center;">      <h1 style="color:green;">              GeeksForGeeks          </h1>      <p id="GFG_UP">    </p>      <button onclick="Geeks()">        click Here    </button>      <p id="GFG_DOWN"       style="color:green;">    </p>      <script>        var str = "This is GeeksForGeeks";        var up = document.getElementById("GFG_UP");        var down = document.getElementById("GFG_DOWN");        up.innerHTML = "Str = '" + str + "'";          function Geeks() {            down.innerHTML = "str.slice() = "            + str.slice(0, 13) +               "<br>str.substring() = "            + str.substring(0, 13);        }    </script></body>  </html>
Output:
Before clicking on the button:
After clicking on the button:
Example-2:In this Example, In case of substring() it swaps the arguments when start>stop where the slice() returns the empty string.
<!DOCTYPE html><html>  <head>    <title>        JavaScript | difference       between String.slice and      String.substring    </title></head>  <body style="text-align:center;">      <h1 style="color:green;">              GeeksForGeeks          </h1>      <p id="GFG_UP">    </p>      <button onclick="Geeks()">        click Here    </button>      <p id="GFG_DOWN"       style="color:green;">    </p>      <script>        var str = "This is GeeksForGeeks";        var up = document.getElementById("GFG_UP");        var down = document.getElementById("GFG_DOWN");        up.innerHTML = "Str = '" + str + "'";          function Geeks() {            down.innerHTML = "str.slice() = "            + str.slice(13, 0) +               "<br>str.substring() = "            + str.substring(13, 0);        }    </script></body>  </html>
Output:
Before clicking on the button:
After clicking on the button:
Example-3:In this Example, In case of substring() negative arguments are treated as 0 where the slice() returns the empty string.
<!DOCTYPE html><html>  <head>    <title>        JavaScript | difference      between String.slice and      String.substring    </title></head>  <body style="text-align:center;">      <h1 style="color:green;">              GeeksForGeeks          </h1>      <p id="GFG_UP">    </p>      <button onclick="Geeks()">        click Here    </button>      <p id="GFG_DOWN"        style="color:green;">    </p>      <script>        var str = "This is GeeksForGeeks";        var up = document.getElementById("GFG_UP");        var down = document.getElementById("GFG_DOWN");        up.innerHTML = "Str = '" + str + "'";          function Geeks() {            down.innerHTML = "str.slice() = "            + str.slice(-13, 7) +              "<br>str.substring() = "            + str.substring(-13, 7);        }    </script></body>  </html>
Output:
Before clicking on the button:
After clicking on the button:
Syntax -:
string_name.slice(index1 , index2)
Syntax – :
string.substring(start, end)
mayank007rawa
JavaScript-Misc
javascript-string
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.