Benchmark: eval vs Function string interpolation vs pl vs lit

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
eval
new Function
native
plus

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.

I'd be happy to explain the benchmark and its various components.

**Benchmark Overview**

The provided JSON represents a JavaScript microbenchmarking test case on the MeasureThat.net website. The goal of this benchmark is to compare the performance of different approaches for templating and string interpolation in JavaScript.

**Script Preparation Code**

The script preparation code generates an array of 1000 objects, each with four properties: `type`, `action`, `first`, and `second`. These properties are used as placeholders for string interpolation. The code also defines a function `func` using the `Function` constructor, which takes two arguments: `model` and returns a templated string.

**Html Preparation Code**

There is no HTML preparation code provided.

**Individual Test Cases**

The benchmark consists of four test cases:

1. **eval**: This test case uses the built-in `eval` function to evaluate a templated string.
2. **new Function**: This test case defines a function using the `Function` constructor and passes an object with `model` as an argument to retrieve the templated string.
3. **native**: This test case uses template literals (introduced in ECMAScript 2015) for string interpolation.
4. **plus**: This test case uses string concatenation (`+`) for string interpolation.

**Comparison of Approaches**

Here's a brief overview of each approach, their pros and cons:

* **eval**: `eval` is a powerful but potentially insecure function that can evaluate any JavaScript code. Pros: simple to use, widely supported. Cons: performance overhead due to parsing and execution, security risks.
* **new Function**: This approach creates a new function with the given arguments and returns a templated string. Pros: avoids `eval`, provides control over function creation. Cons: overhead of creating a new function, may be slower than native template literals.
* **native (template literals)**: Template literals are a modern JavaScript feature that allows for concise string interpolation. Pros: fast, efficient, widely supported. Cons: introduced in ECMAScript 2015, may not work in older browsers or environments.
* **plus**: String concatenation (`+`) is a simple and straightforward way to interpolate strings. Pros: easy to use, widely supported. Cons: slower than native template literals, can lead to unexpected behavior with large string values.

**Library and Special Features**

There are no libraries used in this benchmark beyond the built-in `Function` constructor. There are also no special JavaScript features or syntaxes mentioned in the provided information.

**Other Alternatives**

If you're interested in exploring alternative approaches for templating and string interpolation, here are a few options:

* **String.prototype.replace()**: This method can be used to replace placeholders in a string with actual values.
* **DOM-based templating libraries**: Libraries like Handlebars.js or Mustache.js provide more advanced templating features and may offer performance improvements over the approaches tested in this benchmark.
* **Native JavaScript modules**: Some browsers and Node.js environments have introduced native JavaScript modules for efficient string interpolation, such as `String.prototype.interpolate()` (for example).

Keep in mind that these alternatives may not be supported by all environments or versions of JavaScript.

Related benchmarks:

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

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

Comparing performance of: eval vs new Function vs native vs plus

Created: 4 years ago by: Guest

Jump to the latest result

eval

new Function

native

plus

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