Q20. What are template literals and tagged templates?

const name = "Rahim";
const age = 25;

// সাধারণ string জোড়া
const greeting1 = "হ্যালো, " + name + "!";

// template literal
const greeting2 = `হ্যালো, ${name}!`;

console.log(greeting2); // "হ্যালো, Rahim!"

// expression ও হিসাবও বসানো যায়
console.log(`আগামী বয়স: ${age + 1}`); // "আগামী বয়স: 26"

const line = `প্রথম লাইন
দ্বিতীয় লাইন`;

console.log(line); // দুই লাইনে ছাপবে

const html = `
  <div class="card">
    <p>এখানে লেখা যায়</p>
  </div>
`;

const name = "Rahim";

console.log(`নাম: \${name}`); // "নাম: ${name}" — হিসাব হয়নি

// নিজে expression বানাতে চাইলে tagged template
function raw(strings, ...values) {
  return strings.raw.join("|") + " :: " + values.join(",");
}

console.log(raw`Hello ${name}`);

function highlight(strings, ...values) {
  return strings.reduce((out, part, i) => {
    const value = values[i - 1];
    return out + (i > 0 ? "[" + value + "]" : "") + part;
  });
}

const name = "Rahim";
const msg = highlight`Hello ${name}, welcome!`;

console.log(msg); // Hello [Rahim], welcome!