如何使用模板字面量正确输出含单/双引号的变量？

方法一：用原生DOM API创建元素（最安全推荐） #

别再手动拼HTML字符串了，直接用DOM方法创建元素，浏览器会自动处理所有特殊字符，根本不用操心转义的事：

// 创建span元素
const span = document.createElement('span');
span.textContent = 'Some Text';
// 用dataset设置data属性，直接赋值就行，引号自动处理
span.dataset.something = dataVariable;
// 也可以用setAttribute，效果一样
// span.setAttribute('data-something', dataVariable);

// 创建父div并把span加进去
const div = document.createElement('div');
div.appendChild(span);

// 最后把元素挂载到页面上
document.body.appendChild(div);

方法二：手动转义HTML特殊字符（迫不得已才用） #

如果非要用字符串拼接，就得把字符串里的特殊字符转成HTML实体。写个简单的转义函数：

function escapeHtml(str) {
  return str.replace(/&/g, '&')
            .replace(/'/g, ''')
            .replace(/"/g, '"')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;');
}

// 拼接时传入转义后的变量
let someHtml = `<div><span data-something='${escapeHtml(dataVariable)}'>Some Text</span></div>`;

转义后，单引号会变成'，双引号变成"，不会破坏HTML的引号结构，但这种方法容易漏转特殊字符，不如DOM API稳妥。

内容的提问来源于stack exchange，提问作者pileup