如何解决 HTML 文本插值中转义字符无法正确识别的问题？

如何在页面中正确识别转义字符

问题描述：在 html 代码中，可以使用 {{ }} 文本插值来嵌入动态内容。但是，当文本中包含转义字符（例如换行符 n）时，它不会在页面上正确换行。如何解决这个问题？

解决方案：

使用特殊字符：\

要让转义字符在页面上正确识别，需要使用 html 实体。对于换行符，实体为 \n。

参考代码：

<div style="white-space: pre-line;">
    <div>{{ '111&amp;#92;n222' }}</div>
</div>

实现原理：

• style="white-space: pre-line;" 属性保留行的空格和换行符。
• &#92;n 实体将转义字符 n 转换为 html 中的换行符 <br>。

注意：

• 请勿直接使用 n，否则页面上不会换行。
• white-space: pre-line; 属性在所有主流浏览器中都得到支持。