Code-wise, there is no specific disadvantage. JS engines are smart enough to not have performance differences between a string literal and a template literal without variables.
In fact, I might even argue that it is good to always use template literals:
You can already use single quotes or double quotes to make strings. Choosing which one is largely arbitrary, and you just stick with one. However, it is encouraged to use the other quote if your string contains your chosen string marker, i.e. if you chose
', you would still do"don't argue"instead of'don\'t argue'. However, backticks are very rare in normal language and strings, so you would actually more rarely have to either use another string literal syntax or use escape codes, which is good.For example, you'd be forced to use escape sequences to have the string
she said: "Don't do this!"with either double or single quotes, but you wouldn't have to when using backticks.- You don't have to convert if you want to use a variable in the string in the future.
However, those are very weak advantages. But still more than none, so I would mainly use template literals.
A real but in my opinion ignorable objection is the one of having to support environments where string literals are not supported. If you have those, you would know and wouldn't be asking this question.
Answer from Timo Türschmann on Stack Overflowjavascript - Is there a downside to using ES6 template literals syntax without a templated expression? - Stack Overflow
ES6 JavaScript template literals - What they can and can't do - Stack Overflow
Slightly better template literals
What is Template Literal in JS?
Videos
Code-wise, there is no specific disadvantage. JS engines are smart enough to not have performance differences between a string literal and a template literal without variables.
In fact, I might even argue that it is good to always use template literals:
You can already use single quotes or double quotes to make strings. Choosing which one is largely arbitrary, and you just stick with one. However, it is encouraged to use the other quote if your string contains your chosen string marker, i.e. if you chose
', you would still do"don't argue"instead of'don\'t argue'. However, backticks are very rare in normal language and strings, so you would actually more rarely have to either use another string literal syntax or use escape codes, which is good.For example, you'd be forced to use escape sequences to have the string
she said: "Don't do this!"with either double or single quotes, but you wouldn't have to when using backticks.- You don't have to convert if you want to use a variable in the string in the future.
However, those are very weak advantages. But still more than none, so I would mainly use template literals.
A real but in my opinion ignorable objection is the one of having to support environments where string literals are not supported. If you have those, you would know and wouldn't be asking this question.
The most significant reason not to use them is that ES6 is not supported in all environments.
Of course that might not affect you at all, but still: YAGNI. Don't use template literals unless you need interpolation, multiline literals, or unescaped quotes and apostrophes. Much of the arguments from When to use double or single quotes in JavaScript? carry over as well. As always, keep your code base consistent and use only one string literal style where you don't need a special one.
The name is a bit ambiguous, but template literals do not replace template engines. They role is only to provide a more convenient syntax to work with strings. In fact, the objective was to bring string interpolation to core JavaScript like CoffeeScript did, plus the possibility of clean multiline strings.
This code...
let foo = 'Foo',
bar = 'Bar',
baz = 'Baz';
console.log(`
{bar} ${baz}`);
... is easier to maintain than this one:
var foo = 'Foo',
bar = 'Bar',
baz = 'Baz';
console.log(foo + ' ' + bar + ' ' + baz);
Moreover, this code...
let str = `Foo
Bar
Baz`;
... is more readable than this one:
var str = 'Foo\n\
Bar\n\
Baz';
Even if they do not replace template engines, template literals may be useful to preprocess strings (see tagged template literals). With this functionality, we can for instance escape strings with a custom htmlentities function:
function htmlentities(raw) {
let str = raw[0];
return str.replace(/&/g, '&')
.replace(/>/g, '>')
.replace(/</g, '<')
.replace(/"/g, '"')
.replace(/'/g, ''');
}
console.log(htmlentities`&><\"\'`);
Under the hood, tagged template literals are syntactic sugar for a well-known string manipulation practice embodied by sprintf in many programming languages:
let foo = 'Foo',
bar = 'Bar';
function htmlentities(raw, ...args) {
console.log('String pieces:');
console.log(raw);
console.log('String arguments:');
console.log(args);
return 'Cool, isn\'t it?';
}
console.log(htmlentities`Hello,
{bar}!`);
There is a fundamental difference between the ES6 template literals and a template library such as handlebars in that ES6 template literals are just part of the language, whereas a templating language/engine is a library that provides a higher level API that is useful for making big, complicated strings, like HTML pages without having to get involved manipulating strings in JavaScript on a low-level. In other words, they solve different problems.
ES6 template literals can more accurately be thought of as syntax sugar for doing things like var str = "This is some text with "+someContent+" inserted into it." or "This is some text with "+someFunction(param, param2)+" inserted into it."
On the upside, any logic you could do in JavaScript, you can do with a template literal, and on the downside, it doesn't give you a higher level API. It just makes JavaScript string handling a little bit smoother, like it is in some other languages like Python and Ruby.
I started learning JavaScript in 2012 before this was full supported, never realized the backtick was used in JavaScript. It works great
const number = 2
const message = `The number is ${number}`
console.log(message); // => 'The number is 2'