同步JS中嵌入多行PHP输出错误及解决方法

本文探讨了在同步JavaScript代码中嵌入PHP多行输出时，由于传统字符串字面量不支持换行符而引发的“Uncaught SyntaxError: Invalid or unexpected token”错误。文章详细阐述了问题根源，并提供了使用JavaScript模板字面量（即反引号字符串）的有效解决方案，确保PHP生成的动态内容能够无缝、安全地集成到前端脚本中，尤其适用于跨站小部件开发等场景。

理解同步JavaScript中嵌入PHP输出的挑战

在Web开发中，尤其是在构建需要服务器端动态内容的小部件或组件时，有时会选择将PHP生成的HTML或其他数据直接嵌入到同步加载的JavaScript代码中。这种方法通常通过PHP在服务器端渲染JavaScript变量来实现，例如：

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

在上述示例中，initialise() 函数可能由PHP动态生成，或者其内部变量被PHP填充。当PHP输出的内容包含换行符时，如果JavaScript变量使用传统的单引号或双引号字符串字面量来接收，就会遇到语法错误。

考虑以下PHP嵌入JavaScript的场景：

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

    // PHP生成的HTML内容，通常包含多行
    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代码块中添加缩进或换行），生成的JavaScript代码就会出现问题。

例如，如果PHP输出如下所示（包含换行）：

var response = "
<p>Best Seller 1, $19.99</p><br>
<p>Best Seller 2, $29.99</p><br>";

此时，浏览器会抛出 Uncaught SyntaxError: Invalid or unexpected token 错误。这是因为在ECMAScript 5及更早版本中，标准的字符串字面量（使用单引号 ' 或双引号 " 定义）不允许直接包含未转义的换行符。每个字符串字面量必须在一行内定义，或者通过 \ 符号进行转义。

解决方案：使用JavaScript模板字面量

为了解决这个问题，我们可以利用ECMAScript 2015（ES6）引入的模板字面量（Template Literals）。模板字面量使用反引号 ` 来定义，它们允许字符串跨越多行而无需特殊转义，并且还支持嵌入表达式。

将上述问题代码中的双引号字符串替换为反引号模板字面量，即可轻松解决多行字符串的问题：

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

    // 使用反引号定义多行字符串
    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也能正确地将其解析为一个完整的字符串，而不会引发语法错误。

模板字面量的优势与应用

1. 多行字符串支持： 最直接的优势是能够创建跨越多行的字符串，无需使用 \n 进行显式换行，代码更整洁、可读性更高。
2. 字符串插值： 模板字面量允许在字符串中嵌入表达式。使用 ${expression} 语法，可以将JavaScript变量或表达式的值直接插入到字符串中。虽然在此特定场景下主要是为了解决多行问题，但在其他JS开发中，这是一个非常强大的特性。

   const name = "World";
   const greeting = `Hello, ${name}!`; // greeting is "Hello, World!"

3. 避免转义字符： 在传统字符串中，如果包含引号，需要进行转义（例如 \" 或 \'）。在模板字面量中，只要不包含反引号本身，就可以自由使用单引号和双引号，无需转义。

注意事项

• 浏览器兼容性： 模板字面量是ES6的特性。现代浏览器（包括IE11及以上）普遍支持。如果需要支持非常老的浏览器，可能需要使用Babel等工具进行转译，或者采用传统的字符串拼接方式（虽然繁琐）。
• PHP输出的安全性： 无论使用何种方式将PHP输出嵌入到JavaScript中，始终要注意安全性。特别是当PHP输出的内容可能来自用户输入时，务必进行适当的转义（例如使用 htmlspecialchars() 或 json_encode()）以防止跨站脚本攻击（XSS）。在本例中，如果 $record->get('title') 或 $record->get('format_price') 包含用户输入，应在 echo 之前进行适当的安全处理。
• 同步加载的局限性： 尽管本解决方案解决了语法问题，但同步加载大量内容到JavaScript中可能会阻塞页面渲染，影响用户体验。对于大型或复杂的动态内容，异步加载（如AJAX）通常是更优的选择。然而，在某些特定场景（如原问题中提及的“需要多个小部件在同一页面且异步加载不是选项”）下，同步加载仍有其应用价值。

总结

当在同步JavaScript代码中嵌入由PHP生成的动态内容时，如果PHP输出的字符串包含换行符，使用传统的单引号或双引号字符串字面量会导致 Uncaught SyntaxError: Invalid or unexpected token 错误。通过采用JavaScript ES6的模板字面量（反引号 `），可以优雅地解决这一问题，允许字符串跨越多行，从而提高代码的可读性和维护性。在实施此类方案时，务必关注浏览器兼容性和输出内容的安全性，以确保应用程序的健壮性和安全性。