Code has been added to clipboard!

substr

Reading time 4 min
Published Aug 10, 2017
Updated Oct 2, 2019

JavaScript subStr: Main Tips

  • The JavaScript substr() method extracts parts of a string.
  • The method begins to extract at the specified string position and returns a new string of specified length.
  • The substr() method does not change the original string. Instead, it returns a new string, containing the trimmed part of the text.
  • An empty string is returned if length is 0 or negative.
  • You may use a negative number to specify the trim start position counting from the end of a string.

Usage and Purpose Explained

The JavaScript substr() method results in a new string, containing the elements that were scraped off the original one. In other words, subStr JavaScript is applied when developers need to retrieve a specific part of the string.

Like you would expect, the JavaScript substr() will not influence the original string. Instead, the functions generates a separate string to represent the part that was taken from the original one.

Syntax Standard

Here is the basic syntax for writing the JavaScript substr() method:

string.substr(start, length)

In the parentheses, you can notice the start parameter, indicating from which index should the function commence the extraction process. It is required to define. More details on this parameter can be found in the table below. The second parameter is optional and called length. It indicates how long should the new string be.

Parameter Description
start Required. Specifies the position (in character index) where to start trimming.
If the parameter is greater than or equal to the length of the string, it will return an empty string.
If the parameter is negative, it will count characters from the end of the string.
If the parameter is larger than the string or negative, the start is set to 0.
length Not required. Specified the length of the extracted string. If not set, it automatically extracts the rest of the original string.

Note: when defining a character index, keep in mind the first character in JavaScript is based at index 0!

JavaScript subString vs subStr

We should briefly address the common misconception about the JavaScript substr() and subString() functions. If you believe these functions to be exactly the same (a lot of beginners actually do), let us shed some light upon this matter.

To begin the JavaScript subString vs subStr discussion, we should state that these functions are similar, but differ in some ways. The mysterious difference hides in the parameters that these functions accept.

The JavaScript substr() function can take two parameters that indicate the index to start the extraction, and the length of the new string to be created:

Example
var str = "Example text";
var res = str.substr(0, 3);

However, the parameters of JavaScript substring() indicate the index to begin and conclude at - not the length.

There is no clear winner in this fight. Try both functions, and decide for yourself which one you're more comfortable using. It is, however, important you know and understand them both.

Code Examples: Chance to Practice

Beginners should take advantage of the following code examples and practice using the JavaScript substr() method.

Click the Try it Live buttons to be transferred to a code editor. That's right: there's no need to leave the browser to practice! The examples below have the results displayed in the comment lines.

The first two code examples reveal how you can start the extraction process in indexes 3 and 8 and end it at the end of the string

Example
var str = "Example text";
var res = str.substr(3);
Example
var str = "Example text";
var res = str.substr(8);

The third example illustrates how the two last characters from the string are to be extracted:

Example
var str = "Example text";
var res = str.substr(10,2);
What Is JavaScript Used For?
Tutorial
Introduction
Output
Syntax
Comment
Commands
Operators
Comparison and Logical Operators
Data Types
Math.random()
Type Conversion
Function Definitions
Events
Objects
Object Properties
Prototype
Array
Sorting Arrays
Strings
Numbers
Number Format
Math Object
Onclick Event
Date
Date Formats
Scope
Regular Expressions
Reserved Words
Common Mistakes
Performance
Forms
Form Validation
Window: The Browser Object Model
Popup Boxes
Cookies
JSON
AJAX Introduction
AJAX Form
Automatic File Download
Functions
Array Methods
String Methods
Date Methods
Timing Events
Cheat Sheet
JavaScript in HTML
HTML DOM Methods
HTML DOM Changing HTML
HTML DOM Animation
HTML DOM EventListener
HTML DOM Navigation
HTML DOM NodeList
HTML DOM Element Nodes
Array Functions
Boolean
Calling a Function
Date Functions
Global Objects
Input Text
Operator
Statements
String Functions
Math
Math.random
Number
RegEx
alert
array.filter
array.length
array.map
array.reduce
array.push
array.sort
break and continue
className
confirm
decodeURIComponent
for
forEach
if
indexOf
innerHTML
location.reload
number.toString
onclick
onload
parseInt
prompt
replace
setAttribute
setInterval
setTimeout
slice
splice
string.includes
string.indexOf
string.split
style.display
submit
substr
substring
switch
test
throw, try and catch
toLowerCase
toUpperCase
use strict
while
window.history
window.location
window.navigator
window.screen