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

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+'!'`;");

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); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
eval
new Function
native
plus
funcPlus
func3

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.

**Overview of the Benchmark**

The benchmark is designed to compare the performance of four different approaches for string interpolation in JavaScript:

1. `new Function` with a string template
2. Template literals (introduced in ECMAScript 2015)
3. String concatenation with a plus sign (`+`)
4. The `eval()` function

**Approaches Compared**

Each approach is compared using the same test case, which generates an array of 1000 objects with random properties (type, action, first, and second). The benchmark measures the time it takes to populate an array with the interpolated strings for each approach.

**Options Compared:**

1. `new Function` with a string template: This approach uses the `Function` constructor to create a new function that takes an object as an argument and returns the interpolated string.
2. Template literals (introduced in ECMAScript 2015): This approach uses template literals, which allow you to embed expressions inside string literals using backticks (`).
3. String concatenation with a plus sign (`+`): This approach uses string concatenation with the `+` operator to build the interpolated string.
4. The `eval()` function: This approach uses the `eval()` function to execute the string as JavaScript code and return the result.

**Pros and Cons of Each Approach:**

1. `new Function` with a string template:
	* Pros: Can be flexible and customizable, but can also lead to security issues if not used carefully.
	* Cons: Can be slower due to the overhead of creating a new function object.
2. Template literals (introduced in ECMAScript 2015):
	* Pros: Concise and expressive syntax, which can improve readability and maintainability.
	* Cons: May require more knowledge of modern JavaScript features for developers who are not familiar with template literals.
3. String concatenation with a plus sign (`+`):
	* Pros: Simple and widely supported syntax, which makes it easy to understand and use.
	* Cons: Can lead to performance issues due to the overhead of creating new strings and concatenating them.
4. The `eval()` function:
	* Pros: Can be used in situations where other approaches are not suitable, such as when working with legacy code or third-party libraries that rely on `eval()`.
	* Cons: Can pose security risks if not used carefully due to the potential for code injection attacks.

**Library Used**

The benchmark uses no external libraries. The only library mentioned is Firefox's Gecko engine, which is used by the benchmarking tool itself.

**Special JS Features or Syntax**

Template literals (introduced in ECMAScript 2015) are a special feature of modern JavaScript that allows you to embed expressions inside string literals using backticks (`). This syntax was introduced in ECMAScript 2015 and has since become a widely accepted standard for string interpolation.

**Other Alternatives**

There are other alternatives for string interpolation in JavaScript, such as:

* Using the `String.prototype.replace()` method with a callback function to replace placeholders in a string.
* Using a library like Underscore.js or Lodash, which provides utility functions for string manipulation and interpolation.
* Using a templating engine like Handlebars.js or Mustache.js, which are designed specifically for server-side rendering and client-side rendering.

However, these alternatives may not be as concise or expressive as template literals, and may require more setup or configuration to use.

Related benchmarks:

eval vs Function string interpolation vs pl vs lit 6 (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

Created: 4 years ago by: Guest

Jump to the latest result

eval

new Function

native

plus

funcPlus

func3

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):