JavaScript slice and Other Substring Methods
JavaScript provides three string methods that select a substring from an existing string: slice
, substring
, and substr
. The slice
method is more flexible than the substring
method. The substr
method is not standardized in ECMAScript, so its use is not recommended. Nonetheless we describe and demonstrate all three methods on this page, starting with the slice
method.
slice
When you invoke the JavaScript slice
method on a string, a new string is returned containing a segment of the original string as determined by the arguments you pass to the slice
method. The first argument specifies the start location of the selection in the string. The second argument is optional; it specifies the end location of the selection. If the end argument is not included, the selected segment continues to the end of the string, as we demonstrate here:
var str = 'unbelievable';
// pass (zero-based) index location 2 to slice
var str2 = str.slice(2);
console.log(str2); // believable
The selected substring does not include the character at the index location of the end argument, as we show here:
var str = 'unbelievable';
var str3 = str.slice(2, 4);
console.log(str3); // be
As you can see in the example above, the substring returned by slice
includes the character specified by the first argument, but not that specified by the second argument.
Both arguments to the slice
method can be negative integers, in which case they specify the number of elements from the end of the string at which to start or end. The following example starts the substring selection four characters from the end of the string by passing -4
to the slice method:
var str = 'unbelievable';
var str4 = str.slice(-4);
console.log(str4); // able
The next example passes -4
and -2
to the slice
method to start substring selection four characters from the end of the string, and end substring selection two characters from the end of the string:
var str = 'unbelievable';
var str5 = str.slice(-4, -2);
console.log(str5); // ab
substring
JavaScript's substring
method is similar to slice
in that you specify start and end locations for selecting a segment from the original string. But unlike slice
, you can't specify the locations using negative integers.
The following shows how to use the substring
method to accomplish the same results that were demonstrated above using slice
:
var str = 'unbelievable';
var str2 = str.substring(2);
console.log( str2 ); // believable
var str3 = str.substring(2, 4);
console.log( str3 ); // be
// use str.length to specify location from end of string
var str4 = str.substring( str.length -4 );
console.log( str4 ); // able
var str5 = str.substring( str.length -4, str.length -2 );
console.log( str5 ); // ab
Although we are at able to achieve the same results with the substring
method as with slice
, it is rather awkward if you want to specify the location from the end of the string since the method does not support negative integer arguments.
substr
JavaScript's substr
method is similar to substring
and slice
in that it selects a segment of the original string and returns a new string. But instead of specifying start and end locations, it specifies start location and length of the returned substring.
Start location can be negative to specify the number of characters from the end of the string. If you leave out the second argument, the substring selection continues to the end of the string
Although this method has broad browser support, it is not standardized in ECMAScript. You may find it described as deprecated in some references.
The following demonstrates how to use the substr
method to accomplish the same results as were shown above for slice
and substring
:
var str = 'unbelievable';
var str2 = str.substr(2);
console.log(str2); // believable
// arguments: start location, length
var str3 = str.substr(2, 2);
console.log(str3); // be
// start from end of string
var str4 = str.substr(-4);
console.log(str4); // able
var str5 = str.substr(-4, 2);
console.log(str5); // ab