Benchmark: JavaScript Case Insensitive String Start: regex vs startsWith() vs indexOf() vs localeCompare()

HTML Preparation code:

<div id=''></div>

Script Preparation code:

window.target = 'tEsT';
var data = window.data = [];
const possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
var TOTAL_STRINGS = window.TOTAL_STRINGS = 100000;

function getRandomInt(max) {
    return Math.floor(Math.random() * max);
}

function makeRandomString(len) {
    var text = "";
    for (var i = 0; i < len; i++) {
        text += possible.charAt(getRandomInt(possible.length));
    }
    return text;
}

while (data.length < TOTAL_STRINGS) {
    data.push(makeRandomString(getRandomInt(20)));
}

Tests:

Regex outside loop
var regex = new RegExp('^'+window.target,'i'); window.data.forEach(str => regex.test(str));
startsWith()
window.data.forEach(str => str.toLowerCase().startsWith(window.target.toLowerCase()));
indexOf()
window.data.forEach(str => str.toLowerCase().indexOf(window.target.toLowerCase()) === 0);
localeCompare()
window.data.forEach(str => { str.subStr(0,window.target.length).localeCompare(window.target, undefined, { sensitivity: 'base', usage:'search'}); });
Regex inside loop
window.data.forEach(str => { (new RegExp('^'+window.target,'i')).test(str); });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Regex outside loop
startsWith()
indexOf()
localeCompare()
Regex inside loop

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

Browser/OS: Chrome 103 on Windows

View result in a separate tab

Test name	Executions per second
Regex outside loop	396.6 Ops/sec
startsWith()	49.2 Ops/sec
indexOf()	44.0 Ops/sec
localeCompare()	0.0 Ops/sec
Regex inside loop	22.3 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 2 months ago):

LLMs can make mistakes. Check important info.

Measuring performance differences between various JavaScript string comparison methods can be crucial for optimizing code and ensuring robustness.

**Benchmark Overview**

The provided benchmark compares the execution times of four string comparison methods:

1. **Regex (regular expression)**: `new RegExp('^'+window.target,'i')` with the `test()` method.
2. **startsWith()**: Using the `startsWith()` method on a lowercase version of the input string (`str.toLowerCase().startsWith(window.target.toLowerCase())`).
3. **indexOf()**: Using the `indexOf()` method with an offset of 0 to match the start of the string (`str.toLowerCase().indexOf(window.target.toLowerCase()) === 0`).
4. **localeCompare()**: Using the `localeCompare()` method on a substring of the input string (`str.subStr(0,window.target.length).localeCompare(window.target, undefined, { sensitivity: 'base', usage:'search' })`).

**Comparison Options**

The options compared are:

* **Regex outside loop vs Regex inside loop**: This comparison tests whether moving the regex object outside the loop (as in "outside" case) has a significant impact on performance compared to keeping it inside the loop (as in "inside" case).
* **startsWith() vs indexOf()**: This comparison compares the execution times of `startsWith()` and `indexOf()` methods.
* **Regex vs startsWith() vs indexOf() vs localeCompare()**: This is the main comparison that tests all four methods.

**Pros and Cons**

1. **Regex outside loop**: Moving the regex object outside the loop can reduce overhead, but it may increase cache misses if the loop iterates over a large number of iterations.
2. **Regex inside loop**: Keeping the regex object inside the loop allows for more flexible iteration and caching, but it can lead to increased memory usage and slower performance due to repeated method calls.
3. **startsWith()**: This method is faster because it uses an optimized implementation under the hood. However, it may not work correctly with non-ASCII characters or Unicode strings.
4. **indexOf()**: Similar to `startsWith()`, this method has an optimized implementation but might not work correctly for all scenarios, especially when dealing with non-ASCII characters or Unicode strings.
5. **localeCompare()**: This method is slower due to its more complex logic and string normalization requirements. It's suitable for comparing strings in a locale-aware manner.

**Special Considerations**

The benchmark uses the `window.target = 'tEsT';` line, which sets a special variable `target` containing the input string `'tEsT'`. This is done to isolate the test from other variables and focus solely on the comparison methods.

Additionally, the benchmark generates random strings using the `getRandomInt()` and `makeRandomString()` functions. This helps ensure that the results are representative of real-world scenarios where string data is generated dynamically.

**Alternatives**

Other alternatives for string comparison in JavaScript include:

* Using Unicode code points or UTF-8 encoding to compare strings.
* Implementing custom string comparison logic based on specific requirements.
* Utilizing libraries like ICU (International Components for Unicode) for locale-aware string comparisons.
* Leveraging modern JavaScript features, such as `URL.createObjectURL()` and `Blob` objects, to handle binary data.

The provided benchmark provides a solid foundation for comparing the performance of different string comparison methods in JavaScript. It can be extended or modified to explore other scenarios and optimizations.

Related benchmarks:

JavaScript Case Insensitive String Start: regex vs startsWith() vs indexOf() vs localeCompare() (version: 4)

Comparing performance of: Regex outside loop vs startsWith() vs indexOf() vs localeCompare() vs Regex inside loop

Created: 2 years ago by: Registered User

Jump to the latest result

Regex outside loop

startsWith()

indexOf()

localeCompare()

Regex inside loop

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 2 months ago):