Creating Multi-Line Strings in JS With Backticks

const html = "<div>\n" +
  "  <h1>Welcome</h1>\n" +
  "  <p>Hello, World!</p>\n" +
  "</div>";

const html = "<div>\n\
  <h1>Welcome</h1>\n\
  <p>Hello, World!</p>\n\
</div>";

const html = [
  "<div>",
  "  <h1>Welcome</h1>",
  "  <p>Hello, World!</p>",
  "</div>",
].join("\n");

const html = `<div>
  <h1>Welcome</h1>
  <p>Hello, World!</p>
</div>`;
 
console.log(html);
// <div>
//   <h1>Welcome</h1>
//   <p>Hello, World!</p>
// </div>

function createCard(user) {
  return `
    <article class="user-card">
      <h2>${user.name}</h2>
      <p class="role">${user.role}</p>
      <p class="email">${user.email}</p>
      <span class="status ${user.active ? "active" : "inactive"}">
        ${user.active ? "Active" : "Inactive"}
      </span>
    </article>
  `.trim();
}
 
const card = createCard({
  name: "Ada Lovelace",
  role: "Engineer",
  email: "ada@runehub.dev",
  active: true,
});

const query = `
  SELECT
    users.id,
    users.name,
    users.email,
    COUNT(orders.id) AS order_count
  FROM users
  LEFT JOIN orders ON orders.user_id = users.id
  WHERE users.active = true
  GROUP BY users.id
  ORDER BY order_count DESC
  LIMIT 10
`.trim();

function validateAge(age) {
  if (typeof age !== "number" || age < 0 || age > 150) {
    throw new Error(`
Invalid age value: ${age}
 
Expected: a number between 0 and 150
Received: ${typeof age} with value ${JSON.stringify(age)}
 
Check the input source and ensure proper type conversion.
    `.trim());
  }
}

function generateNginxConfig(domain, port) {
  return `
server {
    listen 80;
    server_name ${domain};
 
    location / {
        proxy_pass http://localhost:${port};
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}
  `.trim();
}

function getWelcomeMessage(name) {
  if (name) {
    return `
      Welcome, ${name}!
      
      Here are your options:
        - View dashboard
        - Edit profile
        - Sign out
    `;
  }
}
 
console.log(getWelcomeMessage("Ada"));
// Output has 6 spaces of unwanted indentation on every line:
//
//       Welcome, Ada!
//       
//       Here are your options:
//         - View dashboard
//         - Edit profile
//         - Sign out
//     

function getWelcomeMessage(name) {
  if (name) {
    return `Welcome, ${name}!
 
Here are your options:
  - View dashboard
  - Edit profile
  - Sign out`;
  }
}

function getWelcomeMessage(name) {
  if (name) {
    return `
      Welcome, ${name}!
      
      Here are your options:
        - View dashboard
        - Edit profile
        - Sign out
    `.replace(/^ {6}/gm, "").trim();
  }
}

function dedent(strings, ...values) {
  // Build the full string
  let result = strings.reduce((acc, str, i) => {
    return acc + str + (values[i] !== undefined ? values[i] : "");
  }, "");
  
  // Find the minimum indentation (ignoring empty lines)
  const lines = result.split("\n");
  const nonEmptyLines = lines.filter((line) => line.trim().length > 0);
  const minIndent = nonEmptyLines.reduce((min, line) => {
    const indent = line.match(/^(\s*)/)[1].length;
    return Math.min(min, indent);
  }, Infinity);
  
  // Remove the common indentation and trim
  return lines
    .map((line) => line.slice(minIndent))
    .join("\n")
    .trim();
}
 
// Usage
function getWelcomeMessage(name) {
  return dedent`
    Welcome, ${name}!
    
    Here are your options:
      - View dashboard
      - Edit profile
      - Sign out
  `;
}
 
console.log(getWelcomeMessage("Ada"));
// Welcome, Ada!
// 
// Here are your options:
//   - View dashboard
//   - Edit profile
//   - Sign out

// Escaping backticks inside template literals
const code = `Use \`backticks\` for template literals.`;
 
// Escaping ${} to show literal syntax
const docs = `Use \${variable} syntax for interpolation.`;
 
// Mixing escape sequences with literal newlines
const mixed = `Line 1
Line 2\tTabbed content
Line 3`;

const features = ["Fast compilation", "Type safety", "Hot reload", "Built-in routing"];
 
const featureList = `
Key Features:
${features.map((f, i) => `  ${i + 1}. ${f}`).join("\n")}
`.trim();
 
console.log(featureList);
// Key Features:
//   1. Fast compilation
//   2. Type safety
//   3. Hot reload
//   4. Built-in routing

function generateEmail(user, order) {
  return `
Hi ${user.name},
 
Thank you for your order #${order.id}.
 
${order.items.map((item) => `- ${item.name}: $${item.price.toFixed(2)}`).join("\n")}
 
Total: $${order.total.toFixed(2)}
${order.discount ? `\nDiscount applied: -$${order.discount.toFixed(2)}` : ""}
${order.notes ? `\nNotes: ${order.notes}` : ""}
 
Best regards,
RuneHub Team
  `.trim();
}