Differences Between JavaScript Substring vs. Substr

When it comes to string manipulation in JavaScript, developers usually encounter two similar-sounding JavaScript Substring vs. Substr.

Both methods are necessary for extracting portions of a string, but they have complex differences that can impact their usage.

In this article, we will discuss the difference between “substring” and “substr” and provide practical understanding on how to utilize them effectively.

Navigating JavaScript String Manipulation

Manipulating strings is an essential aspect of JavaScript programming.

Whether you are working with user inputs, parsing data, or formatting text, the ability to extract specific segments from a string is important.

That’s where the substring and substr methods come into play. These methods enable you to engrave out portions of a string, allowing you to tailor your data to your specific needs.

JavaScript Substring: Slicing Strings with Precision

The substring method in JavaScript is directed to extract a portion of a string based on specified indices.


string.substring(start, end);


  • start:
    • The index at which the extraction begins (inclusive).
  • end:
    • The index at which the extraction ends (exclusive).

Extracting Subdomains from URLs

Assumed that you have a URL, and you want to extract the subdomain from it. You can use the substring method like this:

Here’s an example code:

const urlSample = "https://sample.example.com";
const subdomainSample = urlSample.substring(8, 15);

Here, the start index is 8 (beginning of “sample“), and the end index is 15 (end of “example“).

JavaScript Substr: Cutting Strings with a Fixed Length

The” substr” method, on the other hand, is used to extract a “substring from a “string“, starting at a specified index and continuing for a specified number of characters.


string.substr(start, length);


  • start:
    • The index at which the extraction starts.
  • length:
    • The number of characters to extract.

Formatting Phone Numbers

Assume that you have a database of phone numbers in a standardized format, and you want to extract the local area code.

You can use the substr method, here’s an example code:

const phoneNumberSample = "+63 (101) 132-5642";
const areaCodeResult = phoneNumberSample.substr(5, 3); 



Here, the start index is 5 (beginning of the area code), and the length is 3 (length of the area code).

Comparing substring and substr

At first peek, substring and substr might occur compatible, but their differences are critical.

  • End Index vs. Length:
    • The primary differences depends in how they resolve the extracted portion. substring uses an end index, whereas substr uses a length.
  • Negative Values:
    • substring treats negative indices as 0, while substr interprets negative start values as counting from the end of the string.

Which to Choose JavaScript Substring vs. Substr?

The options between substring and substr depends on the nature of your task.

If you need to defined exact start and end points, substring is your go-to.

Meanwhile, when you are working with a fixed number of characters from a starting position, substr is your solution.


Can I use negative indices with both substring and substr?

While substr enables negative indices, substring treats them as 0, extracting from the beginning of the string.

Which method is more compatible for extracting a file extension from a filename?

For extracting file extensions, substr is preferable since you know the start index and the fixed length of the extension.

Does the choice between the two methods affect performance?

In most cases, the performance difference is imperceptible. Choose based on the specific requirements of your task.

Can I combine these methods to extract complex substrings?

Absolutely! You can use these methods in combination to obtain complex string extraction.


In JavaScript string manipulation, understanding the particulars methods like substring and substr allows you to handle text data with finesse.

Whether you are penetrating URLs, formatting data, or crafting complex substring patterns, these methods provide valuable tools in your coding.

By selecting the proper method for your specific scenario, you will integrate your code and improve the efficiency of your applications.

Additional Resources

Leave a Comment