Template literals smell a bit like eval to me, and it's often cited that using eval is a bad idea.
I'm not concerned with performance of template literals, but I am concerned about injection attacks (and other security concerns I may not be thinking of).
Edit
An example of something that feels odd to me
let ii = 1;
function counter() {
return ii++;
}
console.log(`${counter()}, ${ii++}, ${counter()}`);
Which outputs
1, 2, 3
The template literal is making side effects at the global level. Both by a function, and directly.
Edit 2
An example indicating the saferness of template literals
let ii = 1;
let inc = function() { ii++; }
console.log('Starting: ' + ii);
let input = prompt('Input something evil (suggestion: inc() or ii++)');
console.log(`You input: ${input}`);
console.log('After template literal: ' + ii);
eval(input);
console.log('After eval: ' + ii);
If you input ii++
when prompted, it logs
Starting: 1
You input: ii+=1
After template literal: 1
After eval: 2
Edit 3
I've started looking into the ECMAScript specification
- 18.2.1 - Function Properties of the Global Object :: Eval (x)
- Notice it's on the global object
- Notice the very next section is about 'Runtime Semantics' of eval
- 12.2.9 - Primary Expression :: Template Literals
- Notice it's an expression
- Notice the next section is about 'Static Semantics' of TemplateStrings
Though I'm not grokking the details, it feels like template literals are specified safer than eval.
Template literals escape quotes automatically, if that's what you're concerned about. They also do not eval or execute anything, they convert whatever you put in to string. If you are worried about SQL Injection try doing that with template literals and you'll see they get escaped.
You should avoid using eval, unless you have a really good reason to use it and you really know you need it to achieve your goal. Otherwise it is best avoided.
I think there is one big difference between eval and template literals.
eval can evaluate dynamic expressions that are not directly visible from code. This makes it dangerous, because you can evaluate any string that may come from anywhere: client / third party / db...
However situation is different in case of template literals,
For example this will work with eval
But this will not work with template literals
You need to insert expression statically to make it work
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
One difference with
eval
is that template literals are parsed at compile time, while the argument toeval
only gets parsed at run-time, wheneval
is executed.Related to this, is that
eval
can get a dynamically built argument, while a template literal is ... literal: it cannot be stored as a template variable, which you could build dynamically, move around and eventually parse: there is no "template variable" data type. A tag function does not actually get a template variable as argument, but the parsed components of it, which are known at compile-time.Some examples
With
eval
you can have this situation:But that is not possible with template literals:
What is possible, is this:
But that does not lead to unwanted code execution, at least not worse than this:
Any function calls must already be encoded literally in a template literal. Values of string variables cannot change that. There is no way a variable function gets called by a template literal. This:
...will call
func
, and that function only. It is chosen by the programmer.A rather evil template literal
Having said that, this is still possible:
But it is evident that the program willingly opens up the possibility to execute any function on the global object. Then indeed, you are getting close to the evilness of
eval
.Note that the same effect is achieved with:
The most evil template literal
As commented, then you might as well make this template literal:
... and so the evil part is not so much in the template literal, but the generic function call you have designed to be in it. For that you don't need template literals or
eval
, but a bad programmer ;-)On the Example
You gave this example:
This executes your
counter
function, but the difference witheval
is that the string literal was already there at design time, and could not have been constructed at run-time. This code is designed to increment your counter, and is not essentially different from:Compile Time
To stress the difference of compile/run time parsing, note that you cannot run code with a template literal that does not have valid syntax.
Compare these two scripts:
and:
Note the syntax error. The first script will only notice the syntax error at run-time when the argument to
eval
is parsed, while the second script will not even run, and give the syntax error immediately.Put more exactly,
eval
executes a new script, with its own compile and run phases. A template literal is parsed/compiled like other code.