Skip to content
Related Articles

Related Articles

Difference between substr() and substring() in JavaScript

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 10 Apr, 2022

Both of the functions are used to get the specified part of the string, But there is a slight difference between them. str.substr() Function: The str.substr() function returns the specified number of characters from the specified index from the given string. Syntax:

str.substr(start, len)

Parameters:

  • start: It is required parameter. It specifies the position from where to start the extraction. The index of the first character is 0. If the start parameter is positive and greater than, or equal, to the length of the str, then this function returns an empty string. If the start parameter is negative, then this function uses it as an index from the end of the string. If the start parameter is negative or greater than the length of string, the start parameter is set to 0.
  • len: It is optional parameter. It specifies the number of characters to extract. If not passed, then it extracts the whole string.

str.substring() This method get the characters from a string, between two specified indices, and returns the new string. Syntax:

str.substring(start, end)

Parameters:

  • start: It is required parameter. It specifies the position where to start the extraction. The index of first character is 0.
  • end: It is optional parameter. It specifies the position (up to, but excluding) where to end the extraction. If not used, it extracts the whole string.

Example 1: This example uses only one parameter for both the functions and produces the same output. 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>
        Difference between substr()
        and substring() function
    </title>
</head>
 
<body style = "text-align:center;">
     
    <h1 style = "color:green;" >
        GeeksForGeeks
    </h1>
     
    <p id="Geek_up" style="color:green;"></p>
 
     
    <button onclick = "Geeks()">
        Click Here
    </button>
     
    <p id="Geek_down"
        style="color:green; font-size:20px;"></p>
 
     
    <script>
        var up = document.getElementById("Geek_up");
        var a = "GeeksForGeeks";
        up.innerHTML = "Str = " + "'" + a + "'";
         
        function Geeks() {
            var down = document.getElementById("Geek_down");
            down.innerHTML = "Str.substr(7) = " + a.substr(7) +
            "<br>" + "Str.substring(7) = " + a.substring(7);
        }
    </script>
</body>
 
</html>                   

Output:

  • Before clicking on the button:
  • After clicking on the button:

Example 2: This example uses the parameter (3, 7) for both functions and returns the output. 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        JavaScript | Difference between
        substr() and substring() function
    </title>
</head>
 
<body style = "text-align:center;">
     
    <h1 style = "color:green;" >
        GeeksForGeeks
    </h1>
     
    <p id="Geek_up" style="color:green;"></p>
 
     
    <button onclick = "Geeks()">
        Click Here
    </button>
     
    <p id="Geek_down"
        style="color:green; font-size:20px;"></p>
 
     
    <script>
        var up = document.getElementById("Geek_up");
        var a = "GeeksForGeeks";
        up.innerHTML = "Str = " + "'" + a + "'";
         
        function Geeks() {
            var down = document.getElementById("Geek_down");
            down.innerHTML = "Str.substr(3, 7) = " + a.substr(3, 7) +
            "<br>" + "Str.substring(3, 7) = " + a.substring(3, 7);
        }
    </script>
</body>
 
</html>                   

Output:

  • Before clicking on the button:
  • After clicking on the button:

Let us understand the differences in a tabular form -:

 substr()substring()
1.It is used to extract a part of the stringIt is used to extract a substring in a string
2.It takes parameters as starting index of the part which we want to extract and the length till which we want to extract the string part.Its parameters are the start and end position of the substring that  we want to extract
3.

Syntax -:

string.substr(start, length)

Syntax – :

string.substring(start, end)

4.It does not distort the original stringIt is also an in-built string method in Javascript.
5.It is also an in-built string method in Javascript.It does not distort the original string
6.Its return type value is of type string.Its return value is of type string
7.It is an ECMAScript1 feature.It is an ECMAScript1 feature.
8.Its supported browsers are -: chrome , safari, Microsoft edge , firefox , Internet Explorer , operaIts supported browsers are -: chrome , safari, Microsoft edge , firefox , Internet Explorer , opera

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!