如何在Angular Material matTooltip中正确渲染Unicode字符？

失效原因 #

无方括号写法的静态matTooltip属性值属于HTML原生属性的纯文本内容，不会经过JavaScript字符串解析流程，因此写在单引号包裹的属性值里的\u2082这类JS格式的Unicode转义序列，会被原样当成普通文本输出，无法转换为对应的下标2字符。

可落地的解决方法 #

• 方法1：直接嵌入实际Unicode字符
  跳过转义序列，直接把需要展示的特殊Unicode字符硬编码在静态tooltip值中。以下标2对应的U+2082字符为例：

  <span matTooltip='CO₂'>Dummy Text with Tooltip</span>
  

  这类特殊字符可以通过系统自带的字符映射工具、支持特殊符号的输入法直接输入，不需要依赖转义语法。

• 方法2：通过组件类属性绑定转义后的字符串
  如果你更习惯使用\uXXXX格式的Unicode转义编写内容，可以把带转义序列的字符串定义在组件的TypeScript代码中。TS运行环境会正常解析这类转义为对应Unicode字符，再通过属性绑定传给matTooltip：
  组件内TS代码：

  // 此处转义序列会被TS正常解析为CO₂
  tooltipContent = 'CO\u2082';
  

  模板内绑定代码：

  <!-- 用方括号做属性绑定，读取组件中已解析完成的字符串值 -->
  <span [matTooltip]="tooltipContent">Dummy Text with Tooltip</span>
  

平台内容输入提示 #

在StackOverflow等技术平台编辑内容时，直接输入对应的实际Unicode字符即可正常渲染下标效果，不需要展示原始转义序列；只要输入环境支持特殊字符输入，就不会出现转义码原样展示的问题。

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