JavaScript与PHP交互：处理多行字符串的语法陷阱与解决方案

问题背景：PHP内容嵌入JavaScript的语法挑战

在前端开发中，我们经常需要将后端（如php）生成的数据或html片段直接嵌入到javascript代码中，以便在页面上动态渲染。一种常见的做法是将php的输出直接赋值给javascript变量。例如，一个php脚本可能会生成一系列的html段落，然后这些段落被包裹在一个javascript字符串中。

考虑以下场景：一个JavaScript函数 initialise() 负责初始化一个页面部件（widget），它需要从PHP获取动态内容并将其插入到DOM元素中。

<div id="widget"></div>
<script src="http://www.project.com/api/?api=bXOIo4ERTaZt-a5b71a1c" type="text/javascript"></script>
<script>
    initialise();
</script>

在 initialise() 函数中，我们尝试将PHP生成的HTML直接赋值给一个JavaScript字符串变量 response：

function initialise() {
    var container = 'widget';
    var ele = document.getElementById( container );

    // PHP内容直接嵌入到JavaScript字符串中
    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;
}

当PHP生成的HTML内容全部在一行时，上述代码通常能够正常工作。然而，一旦为了代码可读性或格式化，PHP输出的内容包含换行符（例如，对PHP代码进行缩进），问题就会出现。

// 包含换行符的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; ?>";

此时，浏览器会抛出 Uncaught SyntaxError: Invalid or unexpected token 错误。

立即学习“PHP免费学习笔记（深入）”；

错误根源：JavaScript传统字符串的限制

这个错误并非PHP的问题，而是JavaScript传统字符串字面量（使用单引号 ' 或双引号 " 定义的字符串）的特性所致。在JavaScript中，传统的字符串字面量不允许直接包含未转义的换行符。如果你想在传统字符串中表示多行内容，必须显式地使用 \n 进行换行，或者通过字符串拼接实现。

当PHP代码在生成HTML时引入了换行符，这些换行符会直接被输出到JavaScript的字符串字面量中，导致JavaScript解析器认为这是一个非法的多行字符串，从而抛出语法错误。

解决方案：使用JavaScript模板字面量（Template Literals）

ES6（ECMAScript 2015）引入了模板字面量（Template Literals），它提供了一种更强大、更灵活的方式来定义字符串，完美解决了传统字符串的多行问题。模板字面量使用反引号 ` 来定义，而不是单引号或双引号。

模板字面量的主要优点包括：

法语写作助手

法语助手旗下的AI智能写作平台，支持语法、拼写自动纠错，一键改写、润色你的法语作文。

31

查看详情

1. 多行字符串支持： 它们可以直接包含换行符，无需任何特殊转义。
2. 字符串插值： 可以在字符串中嵌入表达式，使用 ${expression} 语法。虽然在解决当前PHP嵌入问题时不是主要用途，但这是一个非常强大的特性。

将上述问题代码中的双引号 " 替换为反引号 `，即可轻松解决多行字符串导致的语法错误：

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;
}

通过使用模板字面量，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 = `
<p>Best Seller A, $19.99</p><br><p>Best Seller B, $29.99</p><br>`;

这个多行字符串在JavaScript中是完全合法的，可以被 ele.innerHTML = response; 正确地解析并插入到DOM中。

注意事项与最佳实践

1. 浏览器兼容性： 模板字面量是ES6（ECMAScript 2015）的特性。现代浏览器（如Chrome, Firefox, Edge, Safari的最新版本）普遍支持。如果需要支持非常老的浏览器，可能需要使用Babel等工具进行转译，或者采用传统的字符串拼接方式并手动处理换行符转义。
2. 数据传输格式： 尽管模板字面量解决了多行字符串的语法问题，但对于更复杂的数据交换，将PHP数据编码为JSON格式通常是更健壮、更标准的方法。然后，JavaScript可以通过 JSON.parse() 解析这些数据，再动态构建HTML。这有助于分离数据和视图，提高代码的可维护性。
   • PHP端（示例）：

     <?php
     header('Content-Type: application/json');
     $data = []; // 假设这是你的畅销书数据
     foreach( $this -> 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 += `<p>${item.title}, ${item.price}</p><br>`;
             });
             ele.innerHTML = htmlContent;
         })
         .catch(error => console.error('Error fetching data:', error));

     登录后复制

     虽然原问题场景中明确指出不能使用异步JavaScript/AJAX，但对于新项目或允许异步的场景，JSON是更推荐的数据交换方式。

3. 安全性： 直接将后端生成的HTML插入到 innerHTML 中存在跨站脚本攻击（XSS）的风险，特别是当PHP输出包含用户输入时。务必确保所有嵌入的PHP变量都经过适当的转义（例如使用 htmlspecialchars()），以防止恶意脚本注入。

总结

Uncaught SyntaxError: Invalid or unexpected token 错误在将PHP动态生成的多行内容直接嵌入JavaScript字符串时非常常见。其根本原因在于JavaScript传统字符串字面量不支持未转义的换行符。通过采纳ES6的模板字面量（使用反引号 `），开发者可以轻松解决这一问题，使PHP生成的多行HTML内容能够无缝地融入JavaScript代码。虽然模板字面量提供了便捷的解决方案，但在设计前后端数据交互时，仍需考虑数据传输的最佳实践（如JSON）和安全防护措施，以构建更健壮、更安全的应用程序。

以上就是JavaScript与PHP交互：处理多行字符串的语法陷阱与解决方案的详细内容，更多请关注php中文网其它相关文章！