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