如何在JS的output函数中为变量name添加带class的span标签？

直接把name变量包裹进带指定class的span标签字符串中，再和"Hello"拼接后传给output函数，以下是两种常用实现方式：

1. ES6模板字符串（推荐） #

模板字符串语法更简洁直观，适合现代JS环境：

// 假设name已定义，例如 var name = "Alice";
output(`Hello <span class="target-class">${name}</span>`);

如果需要复用包裹后的name，也可以单独提取：

const wrappedName = `<span class="target-class">${name}</span>`;
output(`Hello ${wrappedName}`);

2. 传统字符串拼接 #

如果你的运行环境不支持ES6，用加号拼接字符串：

var name = "Bob";
var wrappedName = '<span class="target-class">' + name + '</span>';
output("Hello " + wrappedName);

额外提示：处理特殊字符 #

如果name可能包含HTML特殊字符（比如<、>、"），为避免XSS安全问题，建议先对name转义：

function escapeHtml(str) {
  return str.replace(/[&<>"']/g, match => {
    const escapes = {
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      '"': '&quot;',
      "'": '&#039;'
    };
    return escapes[match];
  });
}

// 转义后再包裹
const safeWrappedName = `<span class="target-class">${escapeHtml(name)}</span>`;
output(`Hello ${safeWrappedName}`);

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