输出 PHP 变量到 JavaScript 变量「正确方式」

如果你不是 SPA,那么在Laravel Blade 模板中不可避免输出部分内容到 JavaScript 脚本中:

例如 Bad ✖️:

<script>
    var profile = {
        'username' =>  '{{ $username }}'
    };
</script>
  • 如果 $username 中存在 ' or " 等其他的字符,那么js语法错误;如上面代码变量 $username = "我有一个'单引号"'username' => '我有一个'单引号' 语法就出现问题
  • 只支持字符串,无法将对象和数组直接输出到 js 变量中

例如 Good ✔️:

<script>
    {!! app('js.transformer')->setNamespace('profile')->put(['username' => $username]); !!}
</script>

有一个扩展可以很好解决这个问题:
https://github.com/laracasts/PHP-Vars-To-J...

我缩减了一个版本:
https://github.com/helingfeng/php2js-vars

使用方式:

composer require helingfeng/php-javascript-transformer

代码示例:

// 包含特殊字符输出
app('js.transformer')->put(['username' => "'helingfeng"]);
# window.username = '\'helingfeng';

// 修改 namespace 输出
app('js.transformer')->setNamespace('profile')->put(['username' => 'helingfeng']);
# window.profile = window.profile || {};profile.username = 'helingfeng';

// 输出包含 script 标签
app('js.transformer')->includeScript()->put(['username' => 'helingfeng']);
# <script>
#    window.username = 'helingfeng';
#</script>

模板中使用 {!! !!} 非转义输出页面头部或底部即可。

本作品采用《CC 协议》,转载必须注明作者和本文链接
Sparkfly
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
讨论数量: 6

额。。我记得在blade 的script 标签可以输出PHP变量的哇...。 例如你上面的这个类型的。。我实验了一下。。没问题的。
但是如果你的你在外部引入的script的话。我记得不行。

blade的 script 标签里面:

file

console:

file

4年前 评论
Sparkfly

@白小白 可能你没看清楚,模板是可以直接按你截图输出,但是如果文本内容包含特殊字符就会有问题

4年前 评论
WhiteDragon 4年前
Sparkfly

@白小白 并且,如果你想输出数组类型,也不能直接做到,需要手工调用 json_encode

4年前 评论

@Sparkfly 数组转 JS 对象可以直接使用 @json($userInfo) 方法

4年前 评论
yema

js 里注入变量是会出现特殊字符的问题
比如
var s = "{{$name}}";
如果此时$name带有 js 的默认字符。比如双引号中出现双引号,单引号中出现单引号。 就会出现 js 语法断句。从而导致 js 代码无法执行。

4年前 评论
foobar

:heart_eyes:

4年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!