Laravel 5.6 Blade如何将PHP数组转为JSON传递给JS前端？

别担心，这个问题其实是对sessionStorage存储规则和Blade输出内容类型的理解偏差导致的，我来给你捋清楚最靠谱的解决办法：

首先先拆解你遇到的问题：

• 直接写{!! json_encode($vueModel) !!}时，Blade输出的是合法的JavaScript对象字面量（比如{"key":"value"}），但sessionStorage只能存字符串，所以直接传JS对象进去，浏览器会自动把它转成[Object Object]，这就是后续JSON.parse报错的原因。
• 给它加单引号后，输出的是带转义双引号的字符串（比如"{\"key\":\"value\"}"），虽然能存，但多余的转义看着闹心，特殊字符场景下还可能出问题。

下面是两种简洁可靠的方案，优先推荐第一种：

方案一：先转JS对象，再用原生JSON方法处理存储 #

这是最符合前端开发习惯的方式，步骤清晰，完全避免手动处理转义：

@php
$vueModel = ['name' => 'Laravel', 'version' => '5.6', 'data' => ['a', 'b', 'c']];
@endphp

<script>
// 第一步：把PHP数组直接转成JS对象
const vueModel = {!! json_encode($vueModel) !!};

// 第二步：存到sessionStorage时，用JSON.stringify把JS对象转成标准JSON字符串
sessionStorage.setItem('vueModel', JSON.stringify(vueModel));

// 后续读取时正常解析即可
let model = JSON.parse(sessionStorage.getItem('vueModel'));
console.log(model); // 完美输出目标对象
</script>

这个方法的优势在于利用原生JS的JSON API处理字符串化，不用纠结转义问题，可读性极强，后续要对这个对象做修改等操作也很方便。

方案二：直接输出无冲突的JSON字符串（一步到位） #

如果你想少写一行代码，直接输出可存储的JSON字符串，可以给json_encode加上JSON_HEX_APOS参数——它会把字符串里的单引号转成十六进制转义序列，这样用单引号包裹时不会出现冲突，也不会有多余反斜杠：

<script>
sessionStorage.setItem('vueModel', '{!! json_encode($vueModel, JSON_HEX_APOS) !!}');

// 读取时同样正常解析
let model = JSON.parse(sessionStorage.getItem('vueModel'));
</script>

这个方案适合追求简洁的场景，输出的是标准JSON格式，没有冗余转义。

总结推荐 #

优先选方案一，逻辑更清晰，符合前端代码的常规写法，后续扩展操作也更灵活。

内容的提问来源于stack exchange，提问作者Anand Moghe