HomeSearch

JavaScript Substring Examples

Get a new string in a range from a start to end index from an existing string with the substring method.
Substring. A string has 10 characters, but we want only a part of this string—the first 5, the last 3. With substring we get a string from within an existing string.
In JavaScript, substring receives 2 arguments: the first index of the substring we are trying to take, and the last index. The second argument is not a count.
First example. Let us begin with this example. We have an input string "cat123." To get the "cat" part, we use a first index of 0, and a last index of 3.Strings

First argument: The index of the first char we are taking a substring at—the first char in a string is at index 0.

Second argument: The last index of the substring. This is not a count, but rather another position in the string.

JavaScript program that uses substring var value = "cat123"; console.log("VALUE: " + value); // Take a substring of the first 3 characters. // ... Start at index 0. // ... Continue until index 3. var result = value.substring(0, 3); console.log("SUBSTRING: " + result); Output VALUE: cat123 SUBSTRING: cat
Substring, 1 argument. Substring can be used with just 1 argument. This is the start index. We can think of this argument as the number of characters we want to skip over.

Length: For substring with 1 argument, the remaining part of the string (after the index specified) is included.

JavaScript program that uses substring, 1 argument var value = "x_frog"; // Skip over first 2 characters. var result = value.substring(2); console.log("VALUE: " + value); console.log("SUBSTRING: " + result); Output VALUE: x_frog SUBSTRING: frog
Performance, reuse substring. Should we try to reuse substrings? In this benchmark we test whether reusing a single substring in a loop is faster than computing a substring each time.

Version 1: This script gets a substring on each iteration of the loop. So many substrings are created.

Version 2: This version computes a substring once, and then reuses it on each iteration of the loop. One substring is created only.

Result: Creating and reusing one substring is the faster approach. So reducing substring calls helps performance.

JavaScript program that gets substring on each iteration var x1 = performance.now(); var source = "catbirddog"; // Version 1: compute substring on each iteration. for (var i = 0; i < 10000000; i++) { var middle = source.substring(3, 7); if (middle !== "bird") { break; } } var x2 = performance.now(); document.title = (x2 - x1); JavaScript program that gets and reuses substring in loop var x1 = performance.now(); var source = "catbirddog"; // Version 2: compute substring once and reuse it. var middle = source.substring(3, 7); for (var i = 0; i < 10000000; i++) { if (middle !== "bird") { break; } } var x2 = performance.now(); document.title = (x2 - x1); Output 311.57 ms Substring in loop 68.43 ms Substring outside of loop
CharAt, char indexes. For accessing an individual character in a string, consider charAt or directly accessing a character. For performance, directly using a character is a good solution.charAt
With substring, we have a way to extract parts of strings. For optimal performance, using the original string and not changing it at all is best, but this is not always possible.
© 2007-2019 Sam Allen. Every person is special and unique. Send bug reports to info@dotnetperls.com.
Home
Dot Net Perls