JavaScript Template Literals

Basic Syntax

• Use backticks instead of single or double quotes to create template literals.

  const greeting = `Hello, world!`;

• Regular strings work inside backticks just like normal quotes.
• Template literals allow you to write multiline strings without concatenation.

  const poem = `Roses are red
  Violets are blue`;

• Newlines and indentation inside backticks are preserved in the string.
• Use template literals for all new code instead of string concatenation.

String Interpolation

• Insert variables into template literals using ${} syntax.

  const name = "Alice";
  const greeting = `Hello, ${name}!`;

• Any JavaScript expression goes inside the curly braces.

  const a = 5;
  const b = 10;
  const sum = `${a} + ${b} = ${a + b}`;

• Call functions and methods directly inside the interpolation.

  const text = `Length: ${str.length}`;
  const html = `<h1>${title.toUpperCase()}</h1>`;

• Use nested template literals for complex expressions if needed.
• Interpolation makes code much more readable than concatenation.

Multiline Strings

• Write strings across multiple lines without using escape characters.

  const html = `
    <div class="card">
      <h2>${title}</h2>
      <p>${content}</p>
    </div>
  `;

• Whitespace and indentation are preserved exactly as written.
• Trim unwanted leading or trailing whitespace with .trim().

  const html = `
    <div>${content}</div>
  `.trim();

• This pattern is perfect for HTML templates and SQL queries.
• No concatenation with + operator needed for multiple lines.

Escaping and Special Characters

• Backticks can be escaped with a backslash inside template literals.

  const code = `Use \`backticks\` for template strings`;

• Other escape sequences like \n, \t work normally.

  const csv = `Name\tAge\n${name}\t${age}`;

• Dollar signs can be escaped if you need a literal $ character.

  const price = `Price: \\$${amount}`;

• Most of the time you won't need escaping — that's a benefit.
• Use template literals to reduce escaping compared to regular strings.

Tagged Templates

• Write a function that receives template literal parts and expressions.

  function highlight(strings, ...values) {
    let result = "";
    for (let i = 0; i < strings.length; i++) {
      result += strings[i];
      if (i < values.length) result += `<mark>${values[i]}</mark>`;
    }
    return result;
  }
  const text = highlight`Hello ${name}, you are ${age} years old`;

• The function receives an array of string parts and the interpolated values.
• Use tagged templates for escaping HTML, formatting currencies, or localization.
• The strings array always has one more element than the values array.
• Tagged templates are advanced but powerful for specialized text processing.

Tip: Prefer template literals over string concatenation with + for all new code, since they're more readable and handle newlines naturally.

Warning: Whitespace inside template literals is preserved, so be careful with indentation if the string will be output to HTML or a file.