PHP 數組安全傳遞給 JavaScript 及 json_encode 中文亂碼的徹底解決方案

核心問題

• json_encode 強制輸出 UTF-8，非 UTF-8 字符會被轉為 \uXXXX Unicode 轉義序列。
• GBK 頁面直接輸出 JSON 導致中文顯示為 \u4e2d\u6587 或亂碼。
• 特殊字符（換行、引號、控制字符）破壞 JSON 結構。

方案一：URL 編碼中轉法（通用、兼容性最好）

<?php
/**
 * 將任意編碼數組安全編碼為 JSON 字符串（中文保持可讀）
 * 原理：urlencode 所有值 → json_encode → urldecode 還原
 */
function jsonEncodeSafe($array) {
    // 遞歸 urlencode 所有標量值
    array_walk_recursive($array, function(&$value) {
        if (is_scalar($value)) {
            $value = urlencode($value);
        }
    });
    $json = json_encode($array);
    return urldecode($json);
}

// 使用
$arr = ['title' => '中文標題', 'content' => "換行\n內容"];
$js = jsonEncodeSafe($arr);
// 輸出: {"title":"中文標題","content":"換行\n內容"} (中文可讀，換行保持)
?>

前端接收代碼

<script>
// PHP 直接輸出到 JS 變量
var data = <?= jsonEncodeSafe($arr) ?>;
console.log(data.title); // "中文標題"
console.log(data.content); // "換行\n內容" (含真實換行符)

// 若需在 HTML 屬性中傳遞
<div data-json='<?= htmlspecialchars(jsonEncodeSafe($arr), ENT_QUOTES) ?>'></div>
// JS 解析
var data = JSON.parse(document.querySelector('[data-json]').dataset.json);
</script>

方案二：Base64 編碼法（適合 POST 傳輸、含特殊字符）

<?php
function jsonEncodeBase64($array) {
    return base64_encode(json_encode($array, JSON_UNESCAPED_UNICODE));
}

// 前端解碼
var data = JSON.parse(atob('<?= jsonEncodeBase64($arr) ?>'));
// 注意：atob() 不支持 Unicode，需 polyfill 或使用 base64.js
?>

缺點：增加體積 ~33%，舊瀏覽器需 polyfill，URL 傳輸需再次 encodeURIComponent。

方案三：現代最佳實踐——全鏈路 UTF-8 + JSON_UNESCAPED_UNICODE (PHP 5.4+)

<?php
// 1. 頁面聲明 UTF-8
header('Content-Type: application/json; charset=utf-8');
// 2. 數據庫讀取已為 UTF-8
// 3. 直接編碼，中文保持原樣
echo json_encode($arr, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
// 輸出: {"title":"中文標題","content":"換行\n內容"}
?>

前提：數據源、PHP 文件、HTML 頁面、數據庫連接**全鏈路 UTF-8**。

對比總結

避坑清單

• 不要手動拼接 JSON 字符串，必須用 json_encode。
• GBK 頁面輸出 JSON 時，**必須**設置 header('Content-Type: application/json; charset=gbk') 並配合方案一。
• 數據庫字段若為 TEXT/BLOB 存儲 JSON，讀出後 json_decode 前確認編碼一致。
• 防止 XSS：HTML 內嵌 JSON 時使用 htmlspecialchars($json, ENT_QUOTES)。