当我们在编写前端代码时，经常会需要对字符串进行拼接，这也是一种常见的操作。然而在进行字符串拼接的过程中会引起一些问题，其中之一就是 Babel 转译错误：Parsing error: Unterminated string constant。这个错误的出现对我们的代码开发带来了一定的阻碍，本文将详细介绍这个问题，并提供一些指导意见以及示例代码。
问题描述
错误信息：Parsing error: Unterminated string constant，翻译成中文就是：未终止的字符串常量。
这个错误通常是由于字符串拼接的时候没有正确的处理好转义符，导致 Babel 转译失败。在一些高级的语言特性下，比如“标签模板”，我们就很容易出现此类问题。
解决方案
在 JavaScript 中，我们通常使用“+”符号进行字符串的拼接。然而，直接使用这个符号拼接字符串，会导致在一些情况下出现转译错误。比如说，在 ES6 中，为了支持模板字符串的嵌入，我们经常需要使用模板字符串和模板字符串标签的结合。
在这样的情况下，我们就需要对字符串中的特殊字符进行转义。这里有一些需要注意的点：
- 转义字符要写在模板字符串中，而不是模板字符串标签中。
- 在模板字符串中使用转义字符时，需要用两个反斜杠表示一个反斜杠。
- 模板字符串的行末不能使用反斜杠。
下面是一个错误示范：
const name = 'John'
const str = `<p>Hello, ${name}!</p>`;
console.log(str);执行结果：
SyntaxError: /test.js: Unterminated template (1:9)
> 1 | const str = `<p>Hello, ${name}!</p>;
| ^^^^^^^^^^^^^^^^^^^^^^我们可以看到，这里错误的地方是在字符串常量中。如果我们运行上述代码，则会出现 Babel 转译错误。
下面是一个正确的示例：
const name = 'John';
const str = `<p>Hello, ${name}!</p>`;
console.log(str);通过这个示例，我们可以看到，在模板字符串中正确使用转义字符时，就不会出现转译错误了。
总结
JS 字符串拼接引起的 Babel 转译错误：Parsing error: Unterminated string constant 是一种比较常见的错误。如果我们在进行字符串拼接时没有正确的处理好转义符，就会导致 Babel 转译失败。为了避免这种情况，我们应该尽量使用 ES6 的模板字符串和模板字符串标签，并注意正确使用转义字符。
希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646dc43f968c7c53b0c64ce5