编写JSX代码时是否需要在表达式末尾添加分号？

这个问题的本质和JSX语法本身无关，判断依据是JavaScript的自动分号插入（ASI）规则，以及你所在项目的代码规范要求：

• 从语法可运行性角度
  JSX会在构建阶段被编译工具转译为普通的JavaScript函数调用，你示例里的<p>qwer</p>最终会被处理为类似React.createElement("p", null, "qwer")的普通JS表达式。
  只要你的代码写法没有触发ASI的异常判定规则，行尾不写分号也可以正常运行，不会抛出语法错误。
  但如果不写分号，遇到下一行以(、[、`、+、-、/这类字符开头的场景时，JS引擎会把上下两行判定为同一条语句，很容易引发意外报错。比如下面的写法就会出问题：

  // 不写分号触发的异常示例
  let p1 = <p>qwer</p>
  (function test() {
    console.log('执行逻辑')
  })()
  // 引擎会把代码解析为：let p1 = <p>qwer</p>(function test(){...})()
  // 相当于尝试把JSX转译后的返回值作为函数调用，直接触发类型错误
  

• 从工程实践角度
  不需要在这个问题上纠结个人偏好，优先遵循项目的统一规范即可：
  • 如果项目配置了ESLint、Prettier这类代码校验/格式化工具，直接按照工具的配置来就行，要求加分号工具会自动补全，要求无分号工具会自动移除多余分号
  • 如果没有统一工具约束，两种写法都合法：坚持写分号可以完全规避ASI带来的意外拼接问题，不需要特意记忆特殊例外场景；坚持无分号写法只要记住少数几个行首特殊字符的前置防御写法（比如行首写括号前先补一个分号），也不会出现运行问题

内容的提问来源于stack exchange，提问作者Joe C.