React项目中如何保持ASCII艺术完整显示

问题根源 #

你的代码出现语法错误是因为模板字符串中包含未转义的反引号（`），导致字符串提前闭合；而显示异常则是因为未使用能保留空格、换行格式的HTML标签。

解决步骤 #

1. 转义模板字符串的边界符：ASCII中的反引号（）需要添加反斜杠转义（\），避免打断模板字符串的结构。
2. 用<pre>标签渲染：该标签会完整保留ASCII艺术的空格、换行等格式，确保字符排版正确。

修复后的String.raw实现 #

const aardvarkAscii = String.raw`
     _.---._    /\\
    ./'       "--\`//
  ./              o \
 /./\  )______   \__ \
./  / /\ \   | \ \  \ \
   / /  \ \  | |\ \  \7
    "     "    "  "        VK
`;

function AardvarkArt() {
  return <pre>{aardvarkAscii}</pre>;
}

补充说明 #

• String.raw会原样保留反斜杠，因此无需额外转义ASCII中的\，仅需处理模板字符串的反引号即可。
• 若使用普通字符串，需要将所有\转译为\\\\，同时转义"和\，代码会更繁琐，优先推荐String.raw方案。
• <pre>标签默认保留原始格式，无需额外设置样式，直接包裹ASCII内容即可。

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