JavaScript SyntaxError – Unexpected template string
A JavaScript error, “SyntaxError: Unexpected template string”, is raised when a template string ( ``) is misused or misplaced, although these strings permit the use of embedded expressions and multi-line strings, using them wrongly would cause the syntax to break, let’s get to know what this error is all about, its causes and how it can be corrected with some examples.
Understanding an error
If you do not handle template strings in code correctly it can cause the error of “Unexpected template string” and that is why these strings must be put in backtick (` `) correctly and applied accurately because if not, then it may break the syntax rules of JavaScript, let's see some cases in which this error can arise.
Case 1: Unclosed Template String
Error Cause:
If you do not close the backticks in a template string can trigger an “Unexpected template string” error.
Example:
let message = `Hello, World;
console.log(message);
Output:
SyntaxError: Unexpected template stringResolution of error
You have to make sure that all template strings use appropriate closing to match the opening quotes.
let message = `Hello, World`;
console.log(message);
let message = `Hello, World`;console.log(message);Output
Hello, World
Case 2: Incorrect Placement of Template String
Error Cause:
An “Unexpected template string” error can occur when you have used a template string incorrectly for example if it is used outside of an expression.
Example:
let greeting = `Hello, ${"World"}
console.log(greeting);
Output:
SyntaxError: Unexpected template stringResolution of error
Ensure that template strings are used correctly and within the right enclosing context.
let greeting = `Hello, ${"World"}`;
console.log(greeting);
let greeting = `Hello, ${"World"}`;console.log(greeting);Output
Hello, World
Case 3: Mixing Quotes and Template Strings
Error Cause:
If you are mixing single or double quotes with template string may lead to an "Unexpected template string" error.
Example:
let quote = 'Hello, ${"World"}';
console.log(quote);
Output:
SyntaxError: Unexpected template stringResolution of error
To avoid such error you should use backticks for template strings and also need to avoid combining them with both single or double quote marks in one sentence.
let quote = `Hello, ${"World"}`;
console.log(quote);
let quote = `Hello, ${"World"}`;console.log(quote);Output
Hello, World
Conclusion
For you to avoid "Unexpected template string" errors happening in JavaScript, make sure all templates strings are enclosed within backticks and used correctly, avoid mixing them up with single or double quotes and use escape sequences properly inside them thus maintaining the integrity and operation of the code.
