Benchmark: eval vs Function string interpolation vs pl vs lit 7

Script Preparation code:

var templ = "This is a ${model.type} interpolation example, to ${model.action} the difference between ${model.first} and ${model.second}!";

var models = [];

var model={};

var func = new Function("model", "return `" + templ + "`;");

var func3 = (model)=>'This is a '+model.type+' interpolation example, to '+model.action+' the difference between '+model.first+' and '+model.second+'!';

var funcPlus = new Function("model", "return `'This is a '+model.type+' interpolation example, to '+model.action+' the difference between '+model.first+' and '+model.second+'!'`;");

var funcPlus2 = new Function("model", `return 'This is a '+model.type+' interpolation example, to '+model.action+' the difference between '+model.first+' and '+model.second+'!'`);


for (let i=0; i<1000;i++){
  models[i] = {type: Math.random()+'', action: Math.random()+'', first: Math.random()+'', second: Math.random()+''};
}

var z=[];

Tests:

eval
for (let i=0; i<1000;i++) { model=models[i]; z[i]=eval("`" + templ + "`"); }
new Function
for (let i=0; i<1000;i++) { model=models[i]; z[i]=func(model); }
native
for (let i=0; i<1000;i++) { model=models[i]; z[i] = `This is a ${model.type} interpolation example, to ${model.action} the difference between ${model.first} and ${model.second}!`; }
plus
for (let i=0; i<1000;i++) { model=models[i]; z[i] = 'This is a '+model.type+' interpolation example, to '+model.action+' the difference between '+model.first+' and '+model.second+'!'; }
funcPlus
for (let i=0; i<1000;i++) { model=models[i]; z[i]=funcPlus(model); }
func3
for (let i=0; i<1000;i++) { model=models[i]; z[i]=func3(model); }
funcPlus2
for (let i=0; i<1000;i++) { model=models[i]; z[i]=funcPlus2(model); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
eval
new Function
native
plus
funcPlus
func3
funcPlus2

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks and explore what's being tested on MeasureThat.net.

**Benchmark Definition**

The benchmark is designed to compare four different approaches for string interpolation:

1. `eval()`
2. Creating a new function using `Function()` with template literals
3. Using native string template literals (introduced in ECMAScript 2015)
4. Using string concatenation with the `+` operator

**Options Compared**

Here's a brief overview of each option:

* **`eval()`**: Evaluates a string as JavaScript code, allowing access to variables and functions within the scope.
* **`Function()` with template literals**: Creates a new function that takes a single argument, using template literals to insert values into the string.
	+ Pros: Can be more readable and easier to maintain than concatenation, allows for dynamic function creation.
	+ Cons: May have performance implications due to function creation and evaluation overhead.
* **Native string template literals**: Uses placeholder syntax (`${}`) to insert values into a string, allowing for more concise and readable code.
	+ Pros: Optimized for performance, easier to read and maintain, and less prone to errors than concatenation or `eval()`.
	+ Cons: Requires ECMAScript 2015 support.
* **String concatenation with `+` operator**: Concatenates strings using the `+` operator, allowing for simple string manipulation.
	+ Pros: Simple and easy to understand, suitable for basic string operations.
	+ Cons: Can lead to performance issues due to repeated string creation and copying.

**Test Results**

The benchmark results show the number of executions per second (FPS) for each option on a Chrome 98 browser, running on Windows 7. The top-performing options are:

1. Native string template literals (`funcPlus` and `funcPlus2`, with 1950-1760 FPS)
2. Creating a new function using `Function()` with template literals (`new Function` and `func3`, with 1756-1317 FPS)

The slower options are:

1. String concatenation with `+` operator (`plus`, with around 500 FPS)
2. `eval()`, with only around 500 FPS

**Conclusion**

MeasureThat.net's benchmark highlights the performance benefits of native string template literals, as well as the importance of choosing the right approach for your use case. Creating a new function using `Function()` can be a viable option if readability and maintainability are crucial, but it may come at a performance cost. String concatenation with `+` operator is generally the slowest method due to its simplicity and lack of optimizations.

Related benchmarks:

eval vs Function string interpolation vs pl vs lit 7 (version: 0)

Compares how eval() compares to Function in some form of templating

Comparing performance of: eval vs new Function vs native vs plus vs funcPlus vs func3 vs funcPlus2

Created: 4 years ago by: Guest

Jump to the latest result

eval

new Function

native

plus

funcPlus

func3

funcPlus2

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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