3.1 ネストした式
テンプレートリテラルでは、関数の呼び出しや三項演算子、テンプレートリテラル自体を含むあらゆる式を使用できるよ。
例:
${a + b}の式では数学の操作が実行され、結果は文字列resultに挿入されるんだ。
JavaScript
const a = 5;
const b = 10;
const result = `The result of ${a} + ${b} is ${a + b}.`;
console.log(result); // "The result of 5 + 10 is 15."
3.2 ネストしたテンプレートリテラル
テンプレートリテラルはネストすることができて、複雑な文字列を作成できるんだ。
例:
userオブジェクトのgreet()メソッドの呼び出しがテンプレートリテラルmessageにネストされているよ。
JavaScript
const user = {
name: 'Bob',
age: 25,
greet() {
return `Hello, ${this.name}!`;
}
};
const message = `${user.greet()} You are ${user.age} years old.`;
console.log(message); // "Hello, Bob! You are 25 years old."
3.3 タグ付きテンプレートリテラル (Tagged Templates)
タグ付きテンプレートリテラルは、テンプレート文字列を処理するための関数を呼び出すことができて、文字列の追加操作をおこなうことができるよ。これには、国際化やHTMLの安全な挿入などが含まれるんだ。
構文:
function tag(strings, ...values) {
// 文字列と値の処理
return result;
}
const result = tag`テンプレート文字列に${変数}`;
例:
highlight()関数は文字列と値を処理し、highlightクラスの<span>タグで値を囲むんだ。
JavaScript
function highlight(strings, ...values) {
return strings.reduce((result, str, i) =>
`${result}${str}${values[i] || ''}`, '');
}
const name = 'Carol';
const hobby = 'painting';
const message = highlight`My name is ${name} and I love ${hobby}.`;
console.log(message);
// "My name is <span class="highlight">Carol</span> and I love <span class="highlight">painting</span>."
3.4 安全な値の挿入
テンプレートリテラルは、XSS（クロスサイトスクリプティング）などの一般的なセキュリティ問題を回避するのに役立ち、値を安全に挿入するのさ。これは特に、ユーザーデータをHTMLに挿入する際に便利なんだ。
例:
safeHTML()関数は、XSS攻撃を防ぐために、値の中の危険な文字を置換するんだ。
JavaScript
function safeHTML(strings, ...values) {
return strings.reduce((result, str, i) =>
`${result}${str}${String(values[i]).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>')}`, '');
}
const userInput = '<script>alert("XSS")</script>';
const message = safeHTML`User input: ${userInput}`;
console.log(message);
// "User input: <script>alert("XSS")</script>"
GO TO FULL VERSION