理解JavaScript中的字符串与语法错误
在Web开发中，我们经常需要将服务器端（如PHP）生成的内容嵌入到客户端JavaScript中。一种常见的模式是将PHP动态生成的一段HTML或文本赋值给JavaScript变量，然后由JavaScript进行DOM操作。然而，当PHP生成的内容包含换行符时，直接将其包裹在JavaScript的单引号或双引号字符串中会导致语法错误。
考虑以下场景：一个页面上有一个JavaScript widget，它需要从PHP后端获取数据并渲染。为了避免异步请求（例如出于同步加载多个widget的特定需求），PHP代码可能直接在页面渲染时将数据嵌入到JavaScript脚本中。
问题代码示例：
假设PHP生成了一段HTML内容，并尝试将其赋值给JavaScript变量：
立即学习“PHP免费学习笔记（深入）”；
<div id="widget"></div>
<script>
function initialise() {
var container = 'widget';
var ele = document.getElementById(container);
// PHP动态生成的多行内容
var response = "<?php foreach( $this->get('api:bestsellers') as $record ): ?>
<p><?php echo $record->get('title'); ?>, <?php echo $record->get('format_price'); ?></p><br>
<?php endforeach; ?>"; // 注意这里PHP输出可能包含换行符
ele.innerHTML = response;
}
initialise();
</script>当PHP输出的内容（例如，为了代码可读性而进行缩进或换行）在JavaScript的"或'字符串字面量内部生成了真实的换行符时，JavaScript解释器会抛出Uncaught SyntaxError: Invalid or unexpected token错误。这是因为标准的JavaScript字符串（使用单引号或双引号）不允许直接包含未转义的换行符。
解决方案：使用JavaScript模板字面量
ES6（ECMAScript 2015）引入了模板字面量（Template Literals），它使用反引号（`）来定义字符串。模板字面量的一个重要特性就是它们可以包含多行文本，而无需使用特殊的转义字符。这完美解决了上述问题。
修正后的代码示例：
将JavaScript变量response的赋值从双引号改为反引号：
<div id="widget"></div>
<script>
function initialise() {
var container = 'widget';
var ele = document.getElementById(container);
// 使用模板字面量（反引号 `）包裹PHP生成的多行内容
var response = `<?php foreach( $this->get('api:bestsellers') as $record ): ?>
<p><?php echo $record->get('title'); ?>, <?php echo $record->get('format_price'); ?></p><br>
<?php endforeach; ?>`; // 注意这里使用了反引号
ele.innerHTML = response;
}
initialise();
</script>通过将字符串包裹在反引号中，即使PHP输出的内容包含多行（例如，由于PHP代码的格式化或实际生成的多行HTML），JavaScript也能正确解析，不再抛出SyntaxError。
注意事项与最佳实践
兼容性： 模板字面量是ES6特性。现代浏览器普遍支持，但在极少数需要兼容老旧浏览器的场景下，可能需要通过Babel等工具进行转译，或者手动将换行符替换为\n进行转义（这会使代码复杂化）。
-
安全问题： 当将PHP动态生成的内容直接嵌入到JavaScript中时，尤其是当这些内容可能来源于用户输入时，务必进行适当的HTML转义以防止跨站脚本（XSS）攻击。在PHP中，可以使用htmlspecialchars()函数来转义输出内容：
<?php echo htmlspecialchars($record->get('title')); ?>如果内容是纯文本且需要保留HTML标签，则需要更复杂的消毒处理。
-
代码可读性： 即使使用模板字面量解决了语法问题，将大量HTML内容嵌入到JavaScript字符串中仍然可能降低代码的可读性和维护性。对于更复杂的UI或大量数据，通常推荐以下做法：
- 分离HTML模板： 将HTML结构保存在单独的模板文件或JavaScript模板引擎中。
- 使用AJAX/Fetch API： 如果业务允许异步加载，通过AJAX请求从后端获取JSON数据或渲染好的HTML片段，然后动态插入到DOM中。这提供了更好的关注点分离，并允许在页面加载后按需加载内容。虽然原问题明确指出不能使用AJAX，但在多数情况下，这是更优的选择。
同步加载的场景： 在一些特定场景下，如多个小型widget需要同步加载，并且它们的初始化逻辑依赖于页面加载时就存在的服务器端数据，直接嵌入PHP输出可能是合理的。在这种情况下，模板字面量是解决多行字符串问题的关键。
总结
在JavaScript中嵌入PHP生成的多行字符串时，Uncaught SyntaxError: Invalid or unexpected token错误是一个常见的陷阱。通过采纳JavaScript ES6的模板字面量（使用反引号`），可以优雅地解决这一问题，允许PHP输出包含换行符的内容而不会导致客户端脚本错误。同时，务必注意内容的安全转义，以防范潜在的XSS漏洞。在选择这种直接嵌入方式时，也应权衡其与异步数据加载等更现代Web开发模式的优劣。
