Template literals

概要

テンプレートリテラルはバッククォート (`) で囲んだ文字列です。${式} で式を埋め込み、改行もそのまま含められます。タグ付きテンプレートで高度な文字列処理も可能です。

対応ブラウザ

基本構文

const name = 'Taro';
const age = 25;

// Embedding expressions
console.log(`Hello, ${name}!`);
console.log(`Age: ${age}, Next year: ${age + 1}`);

// Multiple lines
const html = `
  <div>
    <h1>${name}</h1>
    <p>Age: ${age}</p>
  </div>
`;

ライブデモ

実務での使いどころ

• Template literals の活用

  バッククォートで囲んだ文字列リテラル。式の埋め込みや複数行の記述が可能。

注意点

アクセシビリティ

• JavaScript による動的更新時は、aria-live リージョンで変更をスクリーンリーダーに通知する。

参考リンク

Powered by web-features