Checking if a String Starts With Another String in JavaScript

Identifying String Prefixes in JavaScript

Often in programming, you need to determine if a string begins with a specific sequence of characters (a prefix). JavaScript provides several ways to accomplish this, each with its own advantages and considerations. This tutorial explores these methods, ranging from modern built-in functionalities to compatible polyfills and alternative approaches.

The startsWith() Method (ES6)

The most straightforward way to check if a string starts with another string is using the startsWith() method, introduced in ECMAScript 2015 (ES6). This method is now widely supported by all major browsers.

const str = "Hello World";
const prefix = "Hello";

const startsWithHello = str.startsWith(prefix); // true
console.log(startsWithHello);

const startsWithWorld = str.startsWith("World"); // false
console.log(startsWithWithWorld);

The startsWith() method takes the prefix string as an argument and returns true if the string starts with that prefix, and false otherwise.

Browser Support & Polyfills:

While modern browsers broadly support startsWith(), older browsers might not. If you need to support a wider range of browsers, you can use a polyfill to provide the functionality in older environments. Several excellent polyfills are available, such as:

• Matthias Bynens’s String.prototype.startsWith shim
• es6-shim (which shims many ES6 features, including startsWith)

Using lastIndexOf() for Compatibility

If you need a solution that doesn’t rely on ES6 features or polyfills, you can achieve the same result using the lastIndexOf() method. This method searches for the last occurrence of a substring within a string. By searching from the beginning of the string (index 0), you can effectively check for a prefix.

function startsWith(str, prefix) {
  return str.lastIndexOf(prefix, 0) === 0;
}

const myString = "JavaScript is awesome";
const prefix1 = "JavaScript";
const prefix2 = "Python";

console.log(startsWith(myString, prefix1)); // true
console.log(startsWith(myString, prefix2)); // false

This approach efficiently checks if the string starts with the prefix without creating temporary strings.

Leveraging Regular Expressions

Regular expressions provide another way to determine if a string starts with a specific prefix.

const myString = "Hello World";
const prefix = "Hello";

const regex = new RegExp(`^${prefix}`); // Create a regex starting with the prefix
const startsWithPrefix = regex.test(myString);

console.log(startsWithWithPrefix); // true

Here’s a breakdown:

1. ^: This anchor asserts the position at the start of the string.
2. ${prefix}: This dynamically inserts the prefix string into the regular expression.
3. regex.test(myString): This method tests whether the regular expression matches the string.

Important Note: If the prefix string might contain special regular expression characters (e.g., ., *, +, ?, ^, $, [, ], (, ), {, }, |, \), you must escape them before constructing the regular expression. Otherwise, the regex might not behave as expected.

Extending the String Prototype (Optional)

For convenience, you can extend the String prototype to add a startsWith method if it’s not already defined. This allows you to use the startsWith method directly on any string object.

if (!String.prototype.startsWith) {
  String.prototype.startsWith = function(prefix) {
    return this.lastIndexOf(prefix, 0) === 0;
  };
}

const myString = "Example String";
console.log(myString.startsWith("Example")); // true

This code checks if the startsWith method is already defined on the String prototype. If it’s not, it adds a new method that uses the lastIndexOf approach described earlier. This ensures that the startsWith method is available even in older browsers without requiring a separate polyfill.