使用模板字符串模板化 HTML
你可以创建HTML`...`
模板字符串标记函数以自动编码插值。 (这要求插值仅用作文本,如果在脚本或样式等代码中使用插值,则可能不安全。)
class HTMLString extends String {
static escape(text) {
if (text instanceof HTMLString) {
return text;
}
return new HTMLString(
String(text)
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"')
.replace(/\\/g, '''));
}
}
function HTML(strings, ...substitutions) {
const escapedFlattenedSubstitutions =
substitutions.map(s => [].concat(s).map(HTMLString.escape).join(''));
const pieces = [];
for (const i of strings.keys()) {
pieces.push(strings[i], escapedFlattenedSubstitutions [i] || '');
}
return new HTMLString(pieces.join(''));
}
const title = "Hello World";
const iconSrc = "/images/logo.png";
const names = ["John", "Jane", "Joe", "Jill"];
document.body.innerHTML = HTML`
<h1><img src="${iconSrc}" /> ${title}</h1>
<ul> ${names.map(name => HTML`
<li>${name}</li>
`)} </ul>
`;