substr() Vs. substring()

In JavaScript, both the substr() and substring() methods are used to extract substrings from a given string. However, they differ in how they operate and handle certain scenarios:

substr() Method

The substr() method extracts a portion of a string based on the starting index and a specified length. The parameters are the starting index and the number of characters to extract.

const originalString = "Hello, World!"; const extractedSubstring = originalString.substr(7, 5); // Extracts "World"

If the length parameter is omitted, the method extracts characters from the starting index to the end of the string.

substring() Method

The substring() method also extracts a portion of a string, but it uses two indices as parameters: the starting index and the ending index (exclusive). It always extracts characters between the two indices.

const originalString = "Hello, World!"; const extractedSubstring = originalString.substring(7, 12); // Extracts "World"

If the starting index is greater than the ending index, substring() swaps the indices, ensuring that the substring is extracted correctly.

substr() Vs. substring() | Javascript

  1. substr() uses the starting index and length as parameters, while substring() uses the starting and ending indices.
  2. Negative indices in substr() count from the end of the string, whereas in substring(), negative indices are treated as 0.
  3. If the length parameter in substr() is negative, it's treated as 0. In substring(), if either index is negative or greater than the string length, they are treated as 0.
Examples:
const exampleString = "This is an example string"; const substrResult = exampleString.substr(5, 7); // Result: "is an e" const substringResult = exampleString.substring(5, 12); // Result: "is an e" const substrNegative = exampleString.substr(-9); // Result: "example string" const substringNegative = exampleString.substring(-9); // Result: "This is an example string"

Conclusion

While both methods are used to extract substrings, substr() uses the starting index and length, while substring() uses the starting and ending indices. The choice between them depends on your specific requirements for substring extraction.






Related Topics
  1. JavaScript Interview Questions (Part2)
  2. JavaScript Interview Questions (Part3)
  3. Is JavaScript a true OOP language?
  4. Advantages and Disadvantages of JavaScript
  1. Difference Between JavaScript and ECMAScript?
  2. What is noscript tag?
  3. Escaping Special Characters in JavaScript
  4. What is undefined x 1 in JavaScript?
  5. Logical operators in JavaScript
  6. Difference between '=', '==' and '===' operators in JS
  7. How to loop through objects in JavaScript?
  8. How to write html code dynamically using JavaScript?
  9. How to add html elements dynamically with JavaScript?
  10. How to load another html page from javascript?
  11. What Is The Disadvantages Using InnerHTML In JavaScript?
  12. What is Browser Object Model
  13. How to detect the OS on the client machine in JavaScript?
  14. Difference between window, document, and screen in Javascript?
  15. How to replace all occurrences of a string in JavaScript?
  16. Test a string as a literal and as an object in JavaScript
  17. What is Associative Array in JavaScript
  18. What is an anonymous function in JavaScript?
  19. What is the use of 'bind' method in JavaScript?
  20. Pure functions Vs. Impure functions in javascript
  21. Is Javascript a Functional Programming Language?
  22. What's the Difference Between Class and Prototypal Inheritance?
  23. Javascript, Pass by Value or Pass by Reference?
  24. How to prevent modification of an object in Javascript?
  25. What is 'this' keyword in JavaScript?
  26. How Does Function Hoisting Work in JavaScript?
  27. What do mean by NULL in Javascript?
  28. What does the delete operator do in JavaScript?
  29. What is the Infinity property used for in Javascript?
  30. Event bubbling and Event Capturing in JavScript?
  31. What is "strict mode" and how is it used in JavaScript?
  32. What is the difference between call and apply in JavaScript
  33. Entire content of a JavaScript source file in a function block?
  34. What is an immediately-invoked function expression?
  35. What is escape & unescape String functions in JavaScript?
  36. Instanceof operator in JavaScript
  37. What Are RESTful (REpresentational State Transfer)Web Services?
  38. What is Unobtrusive JavaScript & Why it's Important?
  39. What Does JavaScript Void(0) Mean?
  40. What are JavaScript Cookies?
  41. Difference between Client side JavaScript and Server side JavaScript
  42. TypeError: document.getelementbyid(...) is null
  43. Uncaught TypeError: Cannot read property of undefined In JavaScript
  44. Null and Undefined in JavaScript