Twig 模板中正確使用 JavaScript 變數的技巧：動態路由生成實戰

問題情境：JS 變數無法直接傳入 Twig 路由函式

在 Symfony 等採用 Twig 模板引擎的專案中，常見需求是根據使用者輸入（JavaScript 變數）動態生成 AJAX 請求 URL。許多開發者嘗試直接在 Twig 的 path() 函式中插入 JS 變數，卻發現無效：

<script>
jQuery(document).ready(function() {
    jQuery('#my_input').change(function() {
        var value = jQuery('#my_input').val();
        // ❌ 錯誤寫法：value 會被當作字面字串 "value" 傳入
        jQuery.ajax({
            url: "{{ path('ParteAccidentes_ajax', {'emergencia': value}) }}",
            // ...
        });
    });
});
</script>

根本原因：模板渲染時機差異

• Twig：在伺服器端渲染，僅能存取 PHP 變數
• JavaScript：在客戶端執行，變數於瀏覽器中才存在

當 Twig 解析 {{ path(...) }} 時，value 尚不存在，故被視為普通字串 "value"，導致生成錯誤 URL。

解決方案：字串替換法

先用佔位符生成路由模板，再於 JS 中替換為實際變數值：

<script>
jQuery(document).ready(function() {
    jQuery('#my_input').change(function() {
        var value = jQuery('#my_input').val();
        // 1. 先用佔位符 'text' 生成路由模板
        var url = "{{ path('ParteAccidentes_ajax', {'emergencia': 'text'}) }}";
        // 2. 客戶端替換佔位符為實際 JS 變數
        url = url.replace("text", value);
        
        jQuery.ajax({
            url: url,
            timeout: 5000,
            success: function(data) { alert('ok'); },
            error: function() { alert('mal'); }
        });
    });
});
</script>

進階替代方案

方案一：資料屬性傳遞

<!-- Twig 模板 -->
<input id="my_input" type="text" data-route="{{ path('ParteAccidentes_ajax', {'emergencia': ''}) }}" />

<script>
var baseUrl = $('#my_input').data('route');
var url = baseUrl + encodeURIComponent(value);
</script>

方案二：全域 JS 設定物件

<script>
window.AppRoutes = {
    parteAccidentesAjax: "{{ path('ParteAccidentes_ajax', {'emergencia': ''}) }}"
};
</script>
// 使用時
var url = AppRoutes.parteAccidentesAjax + encodeURIComponent(value);

方案三：RESTful 設計 + Query String

若後端 API 支援，建議改用查詢字串傳參，避免路由參數替換複雜度：

var url = "{{ path('ParteAccidentes_ajax') }}?emergencia=" + encodeURIComponent(value);

最佳實踐總結

1. 永不直接在 Twig 標籤中使用 JS 變數——渲染階段不匹配
2. 優先採用 Query String 傳參——語意清晰、無需字串替換
3. 若必須動態路由參數，使用佔位符替換或資料屬性傳遞基礎 URL
4. 善用 encodeURIComponent() 防止特殊字元導致 URL 失效

延伸閱讀

• Twig 模板常用語句實例小結
• Twig 模板引擎用法入門教程
• 在 Yii 框架中使用 PHP 模板引擎 Twig 的例子
• Twig 模板獲取全域變數的方法