What Are Template Literals? The Backtick Strings AI Always Generates

Why AI Coders See Backticks Everywhere

If you've looked at any AI-generated JavaScript, you've seen strings like this:

const greeting = `Hello, ${user.name}! You have ${count} new messages.`
const url = `https://api.example.com/users/${userId}/posts`
const html = `<div class="card">
  <h2>${title}</h2>
  <p>${description}</p>
</div>`

These are template literals. AI uses them instead of regular quotes because they handle everything quotes can do, plus variable embedding and multi-line text — without messy string concatenation.

The Three Superpowers

1. String Interpolation: ${}

const name = 'Chuck'
const role = 'AI-enabled developer'

// Old way: string concatenation (what you might write manually)
const bio = 'Hi, I\'m ' + name + ' and I\'m a ' + role + '.'
// Hard to read, easy to miss a quote or space

// Template literal way (what AI always generates)
const bio = `Hi, I'm ${name} and I'm a ${role}.`
// Clean, readable, no quote escaping needed

Inside ${}, you can put any JavaScript expression — not just variables:

// Math
const total = `Your total: $${(price * quantity * 1.08).toFixed(2)}`

// Function calls
const greeting = `Welcome back, ${user.getName().toUpperCase()}!`

// Ternary (if/else in one line)
const status = `User is ${isActive ? 'online' : 'offline'}`

// Object properties
const message = `Order #${order.id} shipped to ${order.address.city}`

2. Multi-Line Strings

// Regular strings: need \n for newlines
const oldWay = 'Line 1\nLine 2\nLine 3'

// Template literals: just press Enter
const newWay = `Line 1
Line 2
Line 3`

// This is huge for HTML generation:
const card = `
  <article class="post-card">
    <h2>${post.title}</h2>
    <p>${post.excerpt}</p>
    <span class="date">${post.date}</span>
  </article>
`

3. No Quote Escaping

// With single quotes: must escape apostrophes
const msg = 'It\'s Chuck\'s app and he\'s proud of it'

// With double quotes: must escape inner quotes
const html = "<div class=\"wrapper\"><p class=\"text\">Hello</p></div>"

// With backticks: no escaping needed for either
const msg = `It's Chuck's app and he's proud of it`
const html = `<div class="wrapper"><p class="text">Hello</p></div>`

Where AI Uses Template Literals

What AI Gets Wrong

🚨 Critical: SQL Injection via Template Literals

// DANGEROUS — AI sometimes generates this:
const query = `SELECT * FROM users WHERE email = '${userEmail}'`
// If userEmail is: ' OR 1=1; DROP TABLE users; --
// The query becomes: SELECT * FROM users WHERE email = '' OR 1=1; DROP TABLE users; --'
// Your database is gone.

// SAFE — use parameterized queries:
const result = await db.query('SELECT * FROM users WHERE email = $1', [userEmail])
// The $1 is a parameter — the database treats it as data, never as SQL code

This is the single most dangerous pattern AI generates with template literals. See our SQL injection guide for the complete story.

Using Backticks for Simple Strings (Harmless)

// AI generates:
const name = `Chuck`  // Backticks with no interpolation

// Equivalent to:
const name = 'Chuck'  // Regular quotes

// This is harmless — just unnecessary. Some style guides prefer quotes for
// non-interpolated strings, but it doesn't matter functionally.

What to Learn Next

Frequently Asked Questions