How to check if a string starts with a specific value in JavaScript

The startsWith method in JavaScript is a simpler way to check if a string begins with a specific sequence of characters. It’s part of the ES6 specification, so you can rely on it in most modern environments without polyfills.

At its core, startsWith takes a substring and an optional position argument, which defaults to zero. It returns a boolean indicating whether the string starts with the given substring at the specified position.

const str = "Refactoring is essential";
console.log(str.startsWith("Ref"));        // true
console.log(str.startsWith("ref"));        // false, case-sensitive
console.log(str.startsWith("fact", 3));    // true, checks from index 3

This method is case-sensitive, so if you need case-insensitive checks, you’ll have to normalize the strings first, usually by converting both to lowercase or uppercase.

const input = "JavaScript";
const prefix = "java";

console.log(input.toLowerCase().startsWith(prefix.toLowerCase()));  // true

One subtlety is that if you provide a position argument that’s out of bounds, startsWith will return false because there’s no way for the string to start with something beyond its length.

Also, because it’s a method on the string prototype, you can use it directly on string literals or variables, which makes for very readable code compared to older patterns involving indexOf or substring extraction.

function isPrefix(str, prefix) {
  return str.startsWith(prefix);
}

console.log(isPrefix("Clean Code", "Clean"));  // true
console.log(isPrefix("Clean Code", "clean"));  // false

Before startsWith existed, developers often resorted to:

function oldIsPrefix(str, prefix) {
  return str.indexOf(prefix) === 0;
}

This works but is less expressive and more error-prone, especially when dealing with empty strings or complex conditions.

It’s worth noting that startsWith does not modify the original string (strings are immutable in JavaScript), so it is safe to use without side effects. This method is ideal when you want clear intent in your code, making maintenance and readability easier.

When you need to check multiple prefixes, chaining startsWith or combining it with array methods is cleaner than nested indexOf calls:

const prefixes = ["get", "set", "is"];
const methodName = "getUser";

const matches = prefixes.some(prefix => methodName.startsWith(prefix));
console.log(matches); // true

This pattern is concise and leverages native methods for clarity. It’s a step toward more declarative code, which is always preferable over manual iteration and conditional checks.

One last tip: if you expect the prefix to be dynamic or user-generated, validate or sanitize it before passing it to startsWith to avoid unexpected behavior, especially with empty strings or non-string inputs.

For instance, here’s a safe wrapper:

function safeStartsWith(str, prefix) {
  if (typeof str !== 'string' || typeof prefix !== 'string') return false;
  return str.startsWith(prefix);
}

This avoids runtime errors and clarifies the method’s contract, which is particularly useful in larger codebases where inputs might be less predictable.

Understanding these nuances ensures you use startsWith effectively and avoid pitfalls that come from its strictness and behavior around position and case sensitivity. Moving forward, it’s a solid tool in the toolkit for string prefix checks but not the only one to consider when your requirements grow in complexity.

Using regular expressions for string checks

Regular expressions (regex) provide a powerful alternative for checking string prefixes, especially when the patterns become more complex than simple substring matches. They allow for a variety of checks beyond just the start of a string, making them versatile for various string manipulation tasks.

To check if a string starts with a certain substring using regex, you can use the caret symbol (^) at the beginning of the pattern. This symbol asserts that the following characters must appear at the start of the string.

const str = "JavaScript is awesome";
const regex = /^Java/;

console.log(regex.test(str)); // true

This approach can easily accommodate more complex patterns. For example, if you want to check if a string starts with either “Java” or “JavaScript”, you can use the pipe symbol (|) to denote alternatives:

const regexMultiple = /^(Java|JavaScript)/;

console.log(regexMultiple.test("Java is versatile"));      // true
console.log(regexMultiple.test("Python is great"));        // false

Regex also allows you to incorporate character classes and quantifiers, which can further enhance your prefix checks. For instance, if you want to check for a string that starts with either a capital letter followed by lowercase letters, or a number, you can do the following:

const regexComplex = /^[A-Z][a-z]*|^d+/;

console.log(regexComplex.test("Hello")); // true
console.log(regexComplex.test("123abc")); // true
console.log(regexComplex.test("!@#")); // false

While regular expressions are powerful, they come with a performance cost, especially for complex patterns or when applied to large datasets. It’s essential to balance the need for flexibility with the potential impact on performance. In many cases, simpler methods like startsWith are more efficient for simpler checks.

However, if you need to perform multiple checks or more sophisticated validations, regex allows for concise expression of complex rules. When using regex, always ensure that the patterns are well-tested to avoid unexpected matches, as regex can sometimes behave in ways that are not immediately intuitive.

It’s also worth noting that regex patterns can be compiled for reuse, which can improve performance when the same pattern is applied multiple times. For instance:

const compiledRegex = /^Hello/.source;

function checkIfStartsWithHello(str) {
  const regex = new RegExp(compiledRegex);
  return regex.test(str);
}

console.log(checkIfStartsWithHello("Hello, world!")); // true

Ultimately, the choice between using startsWith and regex will depend on the specific requirements of your application. If you find yourself needing to validate against a range of prefixes or patterns, regex can provide the necessary flexibility, but it is important to understand its implications on performance and maintainability.

Performance considerations when checking string prefixes

When it comes to performance, startsWith is generally the most efficient method for checking string prefixes in JavaScript. It’s a native method implemented by the JavaScript engine, optimized for this exact purpose, and often outperforms alternatives like regular expressions or manual substring comparisons.

Consider a scenario where you need to check prefixes repeatedly in a performance-critical loop. Using startsWith minimizes overhead because it avoids the creation of intermediate strings or regex objects:

const prefixes = ["get", "set", "is"];
const methods = ["getUser", "setData", "isValid", "compute"];

for (let i = 0; i < methods.length; i++) {
  for (let j = 0; j < prefixes.length; j++) {
    if (methods[i].startsWith(prefixes[j])) {
      console.log(methods[i] + " matches prefix " + prefixes[j]);
      break;
    }
  }
}

In contrast, using regular expressions inside such loops can cause unnecessary recompilation of patterns if not handled carefully, leading to slower execution:

const prefixes = ["get", "set", "is"];
const methods = ["getUser", "setData", "isValid", "compute"];

for (let i = 0; i < methods.length; i++) {
  for (let j = 0; j < prefixes.length; j++) {
    const regex = new RegExp("^" + prefixes[j]);
    if (regex.test(methods[i])) {
      console.log(methods[i] + " matches prefix " + prefixes[j]);
      break;
    }
  }
}

To optimize regex usage, compile your regular expressions once outside the loop:

const prefixes = ["get", "set", "is"];
const methods = ["getUser", "setData", "isValid", "compute"];
const regexes = prefixes.map(prefix => new RegExp("^" + prefix));

for (let i = 0; i < methods.length; i++) {
  for (let j = 0; j < regexes.length; j++) {
    if (regexes[j].test(methods[i])) {
      console.log(methods[i] + " matches prefix " + prefixes[j]);
      break;
    }
  }
}

Even with this optimization, startsWith remains more performant for simple prefix checks because it avoids the overhead of regex engine internals. It performs a direct character-by-character comparison up to the length of the prefix, which is often faster.

Another common alternative is to use substring or slice combined with equality checks. While this can be efficient, it involves creating temporary strings, which may add pressure on memory and garbage collection in tight loops:

function prefixCheck(str, prefix) {
  return str.substring(0, prefix.length) === prefix;
}

const methods = ["getUser", "setData", "isValid"];
for (let method of methods) {
  if (prefixCheck(method, "get")) {
    console.log(method + " starts with 'get'");
  }
}

This approach can be faster than regex but still generally slower than startsWith because of the substring allocation.

When measuring performance, keep in mind that the difference between methods becomes significant only in scenarios with large volumes of checks or very frequent calls. For typical application code, the clarity and expressiveness of startsWith usually outweigh micro-optimizations.

One subtle performance consideration is the position argument to startsWith. If you frequently check prefixes from different offsets, be aware that the method doesn’t short-circuit in a way that some custom implementations might. It always compares the substring starting at the given position:

const str = "performance";

console.time("startsWithPos");
for (let i = 0; i < 1000000; i++) {
  str.startsWith("form", 3);
}
console.timeEnd("startsWithPos");

If you control the input, pre-slicing the string and then using startsWith from zero may sometimes be faster, but that’s a niche optimization and usually unnecessary.

Lastly, if your prefix checks involve internationalized strings or Unicode normalization, consider that startsWith operates on code units, not code points. This can cause unexpected results with certain characters, and may require normalization before comparison:

const str = "éclair";
const prefix = "eu0301"; // 'e' + combining acute accent

console.log(str.startsWith(prefix)); // false

// Normalize to NFC form
const normalizedStr = str.normalize("NFC");
const normalizedPrefix = prefix.normalize("NFC");

console.log(normalizedStr.startsWith(normalizedPrefix)); // true

In summary, startsWith is optimized for common prefix checks and should be your go-to method unless you need the flexibility of regex or are working under very specific performance constraints that require profiling and custom solutions.