本文旨在解决将PHP动态生成的多行内容嵌入到JavaScript字符串时可能遇到的Uncaught SyntaxError: Invalid or unexpected token错误。通过深入剖析传统JavaScript字符串的限制，并引入ES6模板字面量（Template Literals）作为解决方案，本文将提供清晰的示例代码和最佳实践，帮助开发者安全、高效地在前端展示后端数据。
问题背景：PHP内容嵌入JavaScript的语法挑战
在前端开发中，我们经常需要将后端（如php）生成的数据或html片段直接嵌入到javascript代码中，以便在页面上动态渲染。一种常见的做法是将php的输出直接赋值给javascript变量。例如，一个php脚本可能会生成一系列的html段落，然后这些段落被包裹在一个javascript字符串中。
考虑以下场景：一个JavaScript函数 initialise() 负责初始化一个页面部件（widget），它需要从PHP获取动态内容并将其插入到DOM元素中。
initialise();
在 initialise() 函数中，我们尝试将PHP生成的HTML直接赋值给一个JavaScript字符串变量 response：
function initialise() { var container = 'widget'; var ele = document.getElementById( container ); // PHP内容直接嵌入到JavaScript字符串中 var response = " get( 'api:bestsellers' ) as $record ): ?> get( 'title' ); ?>, get( 'format_price' ); ?>
"; ele.innerHTML = response;}
当PHP生成的HTML内容全部在一行时，上述代码通常能够正常工作。然而，一旦为了代码可读性或格式化，PHP输出的内容包含换行符（例如，对PHP代码进行缩进），问题就会出现。
立即学习“PHP免费学习笔记（深入）”；
// 包含换行符的PHP输出var response = " get( 'api:bestsellers' ) as $record ): ?>get( 'title' ); ?>, get( 'format_price' ); ?>
";
此时，浏览器会抛出 Uncaught SyntaxError: Invalid or unexpected token 错误。
错误根源：JavaScript传统字符串的限制
这个错误并非PHP的问题，而是JavaScript传统字符串字面量（使用单引号 ‘ 或双引号 ” 定义的字符串）的特性所致。在JavaScript中，传统的字符串字面量不允许直接包含未转义的换行符。如果你想在传统字符串中表示多行内容，必须显式地使用 n 进行换行，或者通过字符串拼接实现。
当PHP代码在生成HTML时引入了换行符，这些换行符会直接被输出到JavaScript的字符串字面量中，导致JavaScript解析器认为这是一个非法的多行字符串，从而抛出语法错误。
解决方案：使用JavaScript模板字面量（Template Literals）
ES6（ECMAScript 2015）引入了模板字面量（Template Literals），它提供了一种更强大、更灵活的方式来定义字符串，完美解决了传统字符串的多行问题。模板字面量使用反引号 ` 来定义，而不是单引号或双引号。
模板字面量的主要优点包括：
多行字符串支持： 它们可以直接包含换行符，无需任何特殊转义。字符串插值： 可以在字符串中嵌入表达式，使用 ${expression} 语法。虽然在解决当前PHP嵌入问题时不是主要用途，但这是一个非常强大的特性。
将上述问题代码中的双引号 ” 替换为反引号 `，即可轻松解决多行字符串导致的语法错误：
function initialise() { var container = 'widget'; var ele = document.getElementById( container ); // 使用模板字面量（反引号 `）来包裹PHP输出 var response = ` get( 'api:bestsellers' ) as $record ): ?> get( 'title' ); ?>, get( 'format_price' ); ?>
`; ele.innerHTML = response;}
通过使用模板字面量，PHP生成的任何包含换行符的HTML内容都能被JavaScript正确地解析为一个多行字符串，从而避免了 Uncaught SyntaxError。
示例代码与运行效果
假设PHP后端 api:bestsellers 返回的数据如下：
// 假设 $this->get('api:bestsellers') 返回一个包含多个记录的数组// 每个记录都有 'title' 和 'format_price' 属性$records = [ (object)['title' => 'Best Seller A', 'format_price' => '$19.99'], (object)['title' => 'Best Seller B', 'format_price' => '$29.99']];
当PHP代码被执行并嵌入到JavaScript中时，response 变量的实际内容将是：
var response = `Best Seller A, $19.99
Best Seller B, $29.99
`;
这个多行字符串在JavaScript中是完全合法的，可以被 ele.innerHTML = response; 正确地解析并插入到DOM中。
注意事项与最佳实践
浏览器兼容性： 模板字面量是ES6（ECMAScript 2015）的特性。现代浏览器（如Chrome, Firefox, Edge, Safari的最新版本）普遍支持。如果需要支持非常老的浏览器，可能需要使用Babel等工具进行转译，或者采用传统的字符串拼接方式并手动处理换行符转义。数据传输格式： 尽管模板字面量解决了多行字符串的语法问题，但对于更复杂的数据交换，将PHP数据编码为JSON格式通常是更健壮、更标准的方法。然后，JavaScript可以通过 JSON.parse() 解析这些数据，再动态构建HTML。这有助于分离数据和视图，提高代码的可维护性。PHP端（示例）：
get( 'api:bestsellers' ) as $record ) { $data[] = [ 'title' => $record -> get( 'title' ), 'price' => $record -> get( 'format_price' ) ];}echo json_encode($data);?>
JavaScript端（示例，通常配合AJAX）：
fetch('http://www.project.com/api/?api=bXOIo4ERTaZt-a5b71a1c') .then(response => response.json()) .then(data => { var container = 'widget'; var ele = document.getElementById(container); let htmlContent = ''; data.forEach(item => { htmlContent += `${item.title}, ${item.price}
`; }); ele.innerHTML = htmlContent; }) .catch(error => console.error('Error fetching data:', error));
虽然原问题场景中明确指出不能使用异步JavaScript/AJAX，但对于新项目或允许异步的场景，JSON是更推荐的数据交换方式。
安全性： 直接将后端生成的HTML插入到 innerHTML 中存在跨站脚本攻击（XSS）的风险，特别是当PHP输出包含用户输入时。务必确保所有嵌入的PHP变量都经过适当的转义（例如使用 htmlspecialchars()），以防止恶意脚本注入。
总结
Uncaught SyntaxError: Invalid or unexpected token 错误在将PHP动态生成的多行内容直接嵌入JavaScript字符串时非常常见。其根本原因在于JavaScript传统字符串字面量不支持未转义的换行符。通过采纳ES6的模板字面量（使用反引号 `），开发者可以轻松解决这一问题，使PHP生成的多行HTML内容能够无缝地融入JavaScript代码。虽然模板字面量提供了便捷的解决方案，但在设计前后端数据交互时，仍需考虑数据传输的最佳实践（如JSON）和安全防护措施，以构建更健壮、更安全的应用程序。
以上就是JavaScript与PHP交互：处理多行字符串的语法陷阱与解决方案的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1319868.html
微信扫一扫 
支付宝扫一扫 
