本文旨在解决在JavaScript中嵌入PHP生成的多行字符串时常见的Uncaught SyntaxError: Invalid or unexpected token错误。核心解决方案是利用JavaScript的模板字面量（template literals），即反引号（`）来正确处理包含换行符的字符串，确保PHP动态生成的内容能够无缝集成到JavaScript变量中。

理解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的赋值从双引号改为反引号：

AlibabaWOOD

阿里巴巴打造的多元电商视频智能创作平台

37

查看详情

<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。

注意事项与最佳实践

1. 兼容性： 模板字面量是ES6特性。现代浏览器普遍支持，但在极少数需要兼容老旧浏览器的场景下，可能需要通过Babel等工具进行转译，或者手动将换行符替换为n进行转义（这会使代码复杂化）。

2. 安全问题： 当将PHP动态生成的内容直接嵌入到JavaScript中时，尤其是当这些内容可能来源于用户输入时，务必进行适当的HTML转义以防止跨站脚本（XSS）攻击。在PHP中，可以使用htmlspecialchars()函数来转义输出内容：

   <?php echo htmlspecialchars($record->get('title')); ?>

   如果内容是纯文本且需要保留HTML标签，则需要更复杂的消毒处理。

3. 代码可读性： 即使使用模板字面量解决了语法问题，将大量HTML内容嵌入到JavaScript字符串中仍然可能降低代码的可读性和维护性。对于更复杂的UI或大量数据，通常推荐以下做法：

   • 分离HTML模板： 将HTML结构保存在单独的模板文件或JavaScript模板引擎中。
   • 使用AJAX/Fetch API： 如果业务允许异步加载，通过AJAX请求从后端获取JSON数据或渲染好的HTML片段，然后动态插入到DOM中。这提供了更好的关注点分离，并允许在页面加载后按需加载内容。虽然原问题明确指出不能使用AJAX，但在多数情况下，这是更优的选择。

4. 同步加载的场景： 在一些特定场景下，如多个小型widget需要同步加载，并且它们的初始化逻辑依赖于页面加载时就存在的服务器端数据，直接嵌入PHP输出可能是合理的。在这种情况下，模板字面量是解决多行字符串问题的关键。

总结

在JavaScript中嵌入PHP生成的多行字符串时，Uncaught SyntaxError: Invalid or unexpected token错误是一个常见的陷阱。通过采纳JavaScript ES6的模板字面量（使用反引号`），可以优雅地解决这一问题，允许PHP输出包含换行符的内容而不会导致客户端脚本错误。同时，务必注意内容的安全转义，以防范潜在的XSS漏洞。在选择这种直接嵌入方式时，也应权衡其与异步数据加载等更现代Web开发模式的优劣。

以上就是JavaScript与PHP交互：处理多行字符串的语法错误的详细内容，更多请关注php javascript es6 java html js json ajax 浏览器 工具 后端 ai 异步加载 php JavaScript json ajax ecmascript html es6 xss Token 字符串 dom 异步 ui 低代码