JavaScript 使用模板字符串来模板化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 xx_src="${iconSrc}" /> ${title}</h1>
<ul> ${names.map(name => HTML`
<li>${name}</li>
`)} </ul>
`;