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.
Home
Dot Net Perls
© 2007-2019 Sam Allen. All rights reserved. Written by Sam Allen, info@dotnetperls.com.