React中JSX如何正确显示撇号？转义字符问题求助

直接正确写法 #

在JSX里无需复杂转义，直接用原生撇号即可，两种方式任选：

• 外层用双引号包裹字符串：

  const title = "This is ashwani`s app";
  

• 用反引号包裹模板字符串：

  const title = `This is ashwani`s app`;
  

之后在JSX中直接渲染：<h1>{title}</h1>，就能正常显示目标文本。

你的写法为什么出错 #

1. 用'属于双重转义：&是字符&的转义，所以最终会被解析成's，导致显示异常。
2. 模板字符串写法错误：你用单引号包裹模板字符串，里面的单引号会和外层冲突，而且模板字符串必须用反引号`，不是单引号。

特殊场景处理（若文本来自后端转义内容） #

如果文本是从后端获取的已转义字符串，需要先解码：

const escapedTitle = "This is ashwani's app";
const decodedTitle = escapedTitle.replace(/'/g, "'");
// 渲染decodedTitle即可

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