Benchmark: Substr vs Substring vs Slice v2

Script Preparation code:

function getRandomColor() {
  const letras = "0123456789ABCDEF";
  let color = "#";
  for (let i = 0; i < 6; i++) {
    color += letras[Math.floor(Math.random() * 16)];
  }
  return color;
}

Tests:

Substr
function getContrast(hexcolor) { const red = parseInt(hexcolor.substr(1, 2), 16); const green = parseInt(hexcolor.substr(3, 2), 16); const blue = parseInt(hexcolor.substr(5, 2), 16); const luminance = (0.2126 * red + 0.7152 * green + 0.0722 * blue) / 255; return luminance > 0.5 ? "black" : "white"; } const color= getRandomColor(); const textColor = getContrast(color);
Substring
function getContrast(hexcolor) { const red = parseInt(hexcolor.substring(1, 2), 16); const green = parseInt(hexcolor.substring(3, 2), 16); const blue = parseInt(hexcolor.substring(5, 2), 16); const luminance = (0.2126 * red + 0.7152 * green + 0.0722 * blue) / 255; return luminance > 0.5 ? "black" : "white"; } const color= getRandomColor(); const textColor = getContrast(color);
Slice
function getContrast(hexcolor) { const red = parseInt(hexcolor.slice(1, 2), 16); const green = parseInt(hexcolor.slice(3, 2), 16); const blue = parseInt(hexcolor.slice(5, 2), 16); const luminance = (0.2126 * red + 0.7152 * green + 0.0722 * blue) / 255; return luminance > 0.5 ? "black" : "white"; } const color= getRandomColor(); const textColor = getContrast(color);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Substr
Substring
Slice

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/124.0.0.0 Safari/537.36

Browser/OS: Chrome 124 on Windows

View result in a separate tab

Test name	Executions per second
Substr	439702.5 Ops/sec
Substring	434490.0 Ops/sec
Slice	404945.7 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested in this benchmark.

The test cases are designed to compare the performance of three different string manipulation methods: `substr`, `substring`, and `slice`. The goal is to measure which method is the fastest for extracting a specific substring from a hexadecimal color code.

**What's being compared?**

1. **Substr**: This is a shorthand notation in JavaScript that extracts a specified number of characters starting from a given position. In this case, it's used to extract two characters ( hex color code) starting from a fixed position.
2. **Substring**: This method uses the `substring()` function to extract a specific substring. The syntax is similar to `substr`, but with a more explicit way of specifying the start and end positions.
3. **Slice**: This method uses the `slice()` function to extract a specified range of characters from a string.

**Pros and Cons:**

1. **Substr**:
	* Pros: More concise notation, which might lead to faster execution due to fewer tokens being processed by the interpreter.
	* Cons: May not be as readable or maintainable for complex substring extraction scenarios.
2. **Substring**:
	* Pros: More explicit and readable syntax, making it easier to understand and maintain code.
	* Cons: Might have slightly slower execution compared to `substr` due to additional tokens being processed.
3. **Slice**:
	* Pros: Allows for more flexible slicing options, such as starting from a specific position or length, which might be useful in certain scenarios.
	* Cons: May introduce unnecessary overhead due to the need to specify start and end positions.

**Library usage:** None

The benchmark doesn't use any external libraries that would impact performance. The focus is solely on comparing the execution speed of these three string manipulation methods.

**Special JS features/syntax:** `substr` and `substring` are shorthand notations for more explicit syntax, but they don't introduce any special JavaScript features or syntax. `Slice()` uses the spread operator (`...`) which was introduced in ECMAScript 2015 (ES6).

**Alternatives:**

For similar string manipulation tasks, developers might consider using other methods, such as:

1. Using regular expressions to extract substrings.
2. Employing String.prototype.slice() with more explicit start and end positions.
3. Utilizing libraries like Lodash or underscore.js for string manipulation.

Keep in mind that the performance differences between these methods may vary depending on the specific use case and JavaScript engine being used.

Related benchmarks:

Substr vs Substring vs Slice v2 (version: 0)

Comparing performance of: Substr vs Substring vs Slice

Created: 2 years ago by: Guest

Jump to the latest result

Substr

Substring

Slice

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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