JavaScript
1function escapeHTML(strings, ...values) { 2 return strings.reduce((result, str, i) => { 3 const value = values[i - 1]; 4 if (typeof value === "string") { 5 return result + escapeSpecialChars(value) + str; 6 } else { 7 return result + String(value) + str; 8 } 9 }); 10}
上記はHTMLの記述をstrings
に渡して特殊記号をエスケープする関数なのですが、第2引数の...values
は何を指しているのでしょうか?
ちなみに下記のような形で使われています。ここでは第2引数を取っていないように見えることも混乱を招いています。
JavaScript
1function fetchUserInfo(userId) { 2 fetch(`https://api.github.com/users/${encodeURIComponent(userId)}`) 3 .then(response => { 4 if (!response.ok) { 5 console.error("エラーレスポンス", response); 6 } else { 7 return response.json().then(userInfo => { 8 // HTMLの組み立て 9 const view = escapeHTML` 10 <h4>${userInfo.name} (@${userInfo.login})</h4> 11 <img src="${userInfo.avatar_url}" alt="${userInfo.login}" height="100"> 12 <dl> 13 <dt>Location</dt> 14 <dd>${userInfo.location}</dd> 15 <dt>Repositories</dt> 16 <dd>${userInfo.public_repos}</dd> 17 </dl> 18 `; 19 // HTMLの挿入 20 const result = document.getElementById("result"); 21 result.innerHTML = view; 22 }); 23 } 24 }).catch(error => { 25 console.error(error); 26 }); 27} 28 29function escapeSpecialChars(str) { 30 return str 31 .replace(/&/g, "&") 32 .replace(/</g, "<") 33 .replace(/>/g, ">") 34 .replace(/"/g, """) 35 .replace(/'/g, "'"); 36} 37 38function escapeHTML(strings, ...values) { 39 return strings.reduce((result, str, i) => { 40 const value = values[i - 1]; 41 if (typeof value === "string") { 42 return result + escapeSpecialChars(value) + str; 43 } else { 44 return result + String(value) + str; 45 } 46 }); 47} 48
回答1件
あなたの回答
tips
プレビュー