JavaScriptのテンプレートリテラルで文字列操作を強化

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

const multiLine = `This is the first line.
This is the second line.`;
console.log(multiLine);
// This is the first line.
// This is the second line.

const a = 5;
const b = 10;
const result = `The sum of a and b is ${a + b}.`;
console.log(result); // The sum of a and b is 15.

const getName = () => "Alice";
const greeting = `Hello, ${getName()}!`;
console.log(greeting); // Hello, Alice!

const user = { name: "Alice", age: 25 };
const message = `User Info: ${`Name: ${user.name}, Age: ${user.age}`}`;
console.log(message); // User Info: Name: Alice, Age: 25

function tag(strings, ...values) {
  return strings.raw[0].toUpperCase() + values.join('');
}

const result = tag`Hello, ${"Alice"}!`;
console.log(result); // HELLO, ALICE!

const stringWithEscape = `This is a backslash: \\`;
console.log(stringWithEscape); // This is a backslash: \

const user = { name: "Alice", age: undefined };
const message = `Name: ${user.name || "Unknown"}, Age: ${user.age ?? "Not provided"}`;
console.log(message); // Name: Alice, Age: Not provided

const items = ["Apple", "Banana", "Cherry"];
const html = `
<ul>
  ${items.map(item => `<li>${item}</li>`).join('')}
</ul>
`;
console.log(html);
// <ul>
//   <li>Apple</li>
//   <li>Banana</li>
//   <li>Cherry</li>
// </ul>

const params = { search: "JavaScript", page: 1, limit: 10 };
const queryString = `?${Object.entries(params).map(([key, value]) => `${key}=${value}`).join('&')}`;
console.log(queryString); // ?search=JavaScript&page=1&limit=10

const locale = "ja";
const translations = {
  en: "Hello, world!",
  ja: "こんにちは、世界！",
};

const message = `${translations[locale] || translations.en}`;
console.log(message); // こんにちは、世界！

// 無効な変数を埋め込むとundefinedが表示される
const user = { name: "Alice" };
console.log(`Name: ${user.name}, Age: ${user.age}`); // Name: Alice, Age: undefined