尝试使用转义单引号解析 JSON 时，Javascript 中出现“意外标识符”错误

Posted 2023-03-14

【中文标题】尝试使用转义单引号解析 JSON 时，Javascript 中出现“意外标识符”错误

【英文标题】："Unexpected identifier" error in Javascript when trying to parse JSON with escaped single quote

【发布时间】：2021-01-05 03:20:49

【问题描述】：

在我的 Laravel 应用程序中，我将 JSON 对象传递给 Vue 组件：

<search v-bind:library="' json_encode(language_library()) '"></search>

language_library()，为了测试，只返回一行：

"you_dont_have_subscription":"You don\\'t have an active subscription right now."

如您所见，字符串中的单引号被转义了。但是，Vue 会抛出这个错误：

[Vue warn]: Error compiling template:

invalid expression: Unexpected identifier in

    '"you_dont_have_subscription":"You don\\'t have an active subscription right now."'

  Raw expression: v-bind:library="'"you_dont_have_subscription":"You don\\'t have an active subscription right now."'"

我不明白为什么会出现这个问题。它是双引号内的单引号，它也被转义（在 php 后端使用 addslashes()）。如果不是这样，我如何在我的 JSON 中拥有一个包含引号的字符串？

如果我手动做这样的事情而不是 addlahes...

str_replace("'", "\'", $string)

...我仍然遇到同样的错误，在 JSON 中的引号前面有两个反斜杠。

【问题讨论】：

我不明白你在说什么。什么逃不过什么？

你的反斜杠反斜杠单引号 .... 转义第二个反斜杠，而不是单引号 .... 你也有一个反斜杠 ... 即。 \\' 逃脱了第二个 \ 而不是 ' （终于写出来了：p - 该死的反斜杠）

这是 PHP 内置的 addlashes 函数的输出...我不是手动添加斜杠。我不明白为什么它会添加两个斜线而不是一个，如果它适得其反？

如果我根本不使用addlashes，我会得到同样的错误 - 那么只有没有斜杠的单引号。

That's the output of PHP's in-built addslashes function - 那么PHP的addlashes函数不是你需要的

【参考方案1】：

这是常见的错误。它与报价无关，双引号会导致此错误。为什么？查看您对 prop 的输入

v-bind:library="'"you_dont_have_subscription":"You don\\'t have an active subscription right now."'"

表示 js 不知道为什么 library prop 以 v-bind:library="'" 结尾，所以使用引号而不是 dbl 引号。像这样：

<search :library='@json(language_library())'></search>

【讨论】：

产生 SyntaxError: Unexpected token o in JSON at position 1

在 Blade 中使用 @json() 指令是个好主意。但是，它需要一个常规的 PHP 变量，所以 language_library() 必须返回一个 PHP 数组，例如["you_dont_have_subscription" => "You don't have an active subscription right now."].

我手头没有代码，但我强烈怀疑在包含 JSON 的字符串上使用 @json() 会重新编码 JSON，而双编码可能不是您需要的.

但是language_library() 确实返回了一个常规数组，我很确定。

【参考方案2】：

您只需编写search 标签，如下例所示：

<search v-bind:library="' json_encode(language_library(), JSON_HEX_QUOT | JSON_HEX_APOS) '"></search>

JSON_HEX_APOS：

所有 ' 都转换为 \u0027。

JSON_HEX_QUOT:

所有 " 都转换为 \u0022。

编辑

基于Laravel's Documentation 的示例，您应该删除单引号。

<option  $isSelected($value) ? 'selected="selected"' : ''  value=" $value ">
     $label 
</option>

所以你的搜索标签会变成这样：

<search v-bind:library=" json_encode(language_library(), JSON_HEX_QUOT | JSON_HEX_APOS) "></search>
// or you could declare a variable and assign `json_encode` to it
<?php $json = json_encode(language_library(), JSON_HEX_QUOT | JSON_HEX_APOS); ?>
<search v-bind:library=" $json "></search>

【讨论】：

现在错误是 avoid using javascript keyword as property name: "for" - 即使 JSON 中没有 for 属性。

【参考方案3】：

试一试可能会在一段时间内发生同样的事情

我使用!! $value !!

<search v-bind:library="!! json_encode(language_library()) !!"></search>

【讨论】：

有时会发生，因为您的对象可能包含'，它编译为您的javascript的关闭字符串，请阅读我的回答，当您将原始刀片回显到您的javascript时，您不需要额外的' /跨度>

【参考方案4】：

回答：你不需要额外的'

解释： 记住json_encode 将返回 并且laravel 会像 一样回显它，然后作为对象本身传递并编译到javascript

编辑：

你的额外 ' 将被 javascript 视为关闭字符串

编码示例

<search v-bind:library=" json_encode(language_library()) "></search>

【讨论】：

当我删除多余的'，我得到Unexpected token o in JSON at position 1