核心原則

PHP 執行於伺服器端，JavaScript 執行於瀏覽器端。**傳遞本質是 PHP 產出包含 JS 變數宣告的 HTML/JS 代碼**。三種主流模式：

模式一：內聯腳本標籤 (最常用)

模式二：data-* 屬性 (HTML5 標準、CSP 友善)

 123,
    'title' => 'PHP 傳值給 JS 完全指南',
    'tags' => ['php', 'javascript', 'json'],
];
?>

    

模式三：AJAX / Fetch 非同步取得 (SPA、動態資料)

 $user->id,
    'name' => $user->name,
    'avatar' => $user->avatar_url,
    'roles' => $user->roles,
]);
?>

// 前端
async function loadUserProfile() {
    const resp = await fetch('/api/user/profile.php', {
        credentials: 'include' // 攜帶 Cookie
    });
    if (!resp.ok) throw new Error('登入已過期');
    const user = await resp.json();
    // 更新 UI、存入 Vuex/Redux/Pinia...
    return user;
}

安全鐵律：永遠使用 json_encode

進階：內容安全政策 (CSP) 相容

若啟用 script-src 'self' 禁止內聯腳本：

1. 使用 data-* 屬性 + 外部 JS 檔案
2. 或產出獨立 config.js.php 並 script src="config.js.php" (需正確 Header)
3. 或採用 Nonce/Hash 機制允許特定內聯腳本

效能優化建議

• 合併配置為單一 window.APP_CONFIG 物件，減少全域變數
• 靜態配置 (API 端點、功能開關) 直接寫死在 JS 檔，僅動態資料由 PHP 注入
• 大量資料改用 AJAX 分頁載入，避免 HTML 體積膨脹

總結

json_encode + 內聯腳本 是最通用模式；data-* 屬性 適合元件化資料；AJAX 適合 SPA 與敏感資料。核心鐵律：**永不手動拼接 JS 字串，永遠 json_encode**。