11-18 01:33 阅读 352

关注

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, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/\\/g, '&#39;'));
  }
}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>
`;