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

【问题标题】："Unexpected identifier" error in Javascript when trying to parse JSON with escaped single quote尝试使用转义单引号解析 JSON 时，Javascript 中出现“意外标识符”错误
【发布时间】：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函数不是你需要的

标签： javascript php json laravel vue.js

【解决方案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