JavaScript模板字符串进阶玩法

const users = [
  { name: 'Alice', age: 28 },
  { name: 'Bob', age: 32 }
];
<p>const userListHTML = <code> &lt;ul&gt; ${users.map(user =></code>
<li>
<strong>${user.name}</strong> is ${user.age} years old
</li>
<code>).join('')} &lt;/ul&gt; </code>;</p>

function highlight(strings, ...values) {
  let result = '';
  strings.forEach((str, i) => {
    result += str;
    if (i < values.length) {
      result += `<mark>${values[i]}</mark>`;
    }
  });
  return result;
}
<p>const name = 'John';
const age = 25;
console.log(highlight<code>Hello, I'm ${name}, ${age} years old.</code>);
// 输出：Hello, I'm <mark>John</mark>, <mark>25</mark> years old.</p>

const isLoggedIn = true;
const message = `You are ${isLoggedIn ? 'logged in' : 'not logged in'}.`;

const user = { firstName: 'Jane' };
const greeting = `Hi, ${user.firstName.toUpperCase()}!`;

const sql = `
  SELECT *
  FROM users
  WHERE active = 1
  ORDER BY created_at DESC
`;
<p>const style = <code> .card { padding: 1em; border: 1px solid #ccc; } </code>;</p>