如何在字符串字面量中使用HTML编码文本并正常渲染为对应符号？

问题原因 #

你遇到的问题本质是HTML实体二次转义：
你在JS字符串中写入的™本身就是HTML实体编码，而你用来向HTML注入内容的工具（框架/SSR工具/手动拼接逻辑）默认会对所有字符串内容做HTML转义处理（用于防范XSS攻击），会把字符串中的&再次转义为&，最终注入到HTML中的实际内容就变成了™，浏览器会将其识别为普通字符串直接展示，不会解析为™符号。

可行解决方案 #

方案1：直接使用Unicode字符（最推荐） #

现在所有主流浏览器都支持直接在字符串中写入Unicode符号，你不需要用HTML实体，直接把代码改成如下即可：

const head = { 
  title: `${ApplicationName} - ${Slogan}™`
}

不需要修改任何渲染逻辑，也不需要关闭转义，完全不会引入安全风险，是最优解。
如果担心部分编辑器编码兼容性问题，也可以用Unicode转义序列代替直接写符号：

const head = { 
  title: `${ApplicationName} - ${Slogan}\u2122`
}

\u2122就是™符号的Unicode转义写法，效果和直接写™完全一致。

方案2：关闭对应内容的HTML转义 #

如果你确实需要使用HTML实体写法，可以调整渲染逻辑，不对title字段的内容做转义：

• 手动拼接HTML场景：渲染title时跳过转义步骤，直接插入字符串即可
• 框架场景（如React/Vue/Next.js等）：使用框架提供的“不转义渲染”能力，比如React的dangerouslySetInnerHTML、Vue的v-html指令等

注意：如果ApplicationName、Slogan是用户可控的输入内容，关闭转义前必须先对内容做安全过滤，移除恶意脚本标签，避免引入XSS安全漏洞。

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