How to Use Template Literals in JavaScript

// Basic template literal
const name = "Alice";
const greeting = `Hello, ${name}!`;
console.log(greeting);

// Multi-line strings
const poem = `Roses are red,
Violets are blue,
JavaScript is awesome,
And so are you!`;
console.log(poem);

// Expressions in templates
const a = 10;
const b = 20;
console.log(`${a} + ${b} = ${a + b}`);
console.log(`Is ${a} greater? ${a > b ? 'Yes' : 'No'}`);

// Function calls
function upper(str) {
  return str.toUpperCase();
}
console.log(`Uppercase: ${upper("hello")}`);

// Nested templates
const items = ["apple", "banana", "cherry"];
const list = `Items: ${items.map(item => `[${item}]`).join(', ')}`;
console.log(list);

// Tagged templates
function highlight(strings, ...values) {
  return strings.reduce((result, str, i) => {
    const value = values[i] ? `**${values[i]}**` : '';
    return result + str + value;
  }, '');
}

const product = "Laptop";
const price = 999;
console.log(highlight`Product: ${product}, Price: ${price}`);

// HTML templates
function createUserCard(user) {
  return `
    <div class="card">
      <h2>${user.name}</h2>
      <p>Age: ${user.age}</p>
      <p>Email: ${user.email}</p>
    </div>
  `;
}

const user = { name: "Bob", age: 30, email: "bob@example.com" };
console.log(createUserCard(user));

// Conditional rendering
function getStatus(active) {
  return `Status: ${active ? '✅ Active' : '❌ Inactive'}`;
}
console.log(getStatus(true));
console.log(getStatus(false));

// Number formatting
const amount = 1234.56;
console.log(`Amount: ${amount.toFixed(2)}`);
console.log(`Amount: ${amount.toLocaleString()}`);

// Date formatting
const date = new Date();
console.log(`Today is ${date.toLocaleDateString()}`);