Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
ES6/ECMA6 template literals not working in JavaScript?
Template literals are a powerful feature of ES6 JavaScript that use backticks (`) instead of quotes. However, they may not work due to browser compatibility, syntax errors, or incorrect usage.
This article covers common issues with template literals and their solutions, helping you debug and properly implement this ES6 feature.
What Are Template Literals?
Template literals use backticks (`) instead of quotes and support multi-line strings and embedded expressions using ${expression} syntax.
Syntax
const str = `string value`;
const interpolated = `Hello ${name}!`;
Common Issues and Solutions
Issue 1: Browser Compatibility
Template literals require ES6 support. Older browsers (IE 11 and below) don't support them.
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
// Check if browser supports template literals
try {
const test = `Template literals work!`;
document.getElementById("demo").innerHTML = test;
} catch (error) {
document.getElementById("demo").innerHTML = "Browser doesn't support template literals";
}
</script>
</body>
</html>
Issue 2: Incorrect Backtick Usage
Using single quotes (') instead of backticks (`) is a common mistake.
<!DOCTYPE html>
<html>
<body>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
const name = "JavaScript";
// Wrong - uses single quotes
const wrong = 'Hello ${name}!';
// Correct - uses backticks
const correct = `Hello ${name}!`;
document.getElementById("demo1").innerHTML = "Wrong: " + wrong;
document.getElementById("demo2").innerHTML = "Correct: " + correct;
</script>
</body>
</html>
Issue 3: Multiline String Problems
Template literals preserve line breaks, which may cause unexpected formatting.
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
const multiline = `Line 1
Line 2
Line 3`;
// Display with line breaks preserved
document.getElementById("demo").innerHTML = multiline.replace(/<br>/g, '<br>');
</script>
</body>
</html>
Working Examples
Variable Interpolation
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
const firstName = "John";
const lastName = "Doe";
const greeting = `Welcome ${firstName} ${lastName}!`;
document.getElementById("demo").innerHTML = greeting;
</script>
</body>
</html>
Expression Evaluation
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
const price = 100;
const tax = 0.08;
const total = `Total: $${(price * (1 + tax)).toFixed(2)}`;
document.getElementById("demo").innerHTML = total;
</script>
</body>
</html>
Mixing Quotes
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
const message = `She said "Hello" and he replied 'Hi there!'`;
document.getElementById("demo").innerHTML = message;
</script>
</body>
</html>
Debugging Tips
| Problem | Cause | Solution |
|---|---|---|
| Literal ${} displayed | Single quotes used | Use backticks (`) |
| Syntax error | Browser doesn't support ES6 | Use Babel transpiler |
| Unexpected line breaks | Multiline preservation | Use .replace() or trim() |
Browser Support
Template literals are supported in all modern browsers. For older browsers, use a transpiler like Babel to convert ES6 code to ES5.
Conclusion
Template literals not working is usually due to using single quotes instead of backticks, browser compatibility issues, or syntax errors. Always use backticks (`) and ensure ES6 support for proper functionality.
2K+ Views
