如何從自動 escaping 日文字符中防止 twig？

Question

我正在嘗試顯示產品的到貨日期。 我正在使用moment.js將YYYY/MM/DD日期字符串格式化為日語本地字符串。 我的 javascript 代碼包含在twig文件中：

<script>
        moment.locale('ja');
        let updateArrivalDate = function() {
            $('.arrival-date').each(function() {
                let $this = $(this);
                $selectDate = $this.next().next().find('select').eq(0);
                $selectTime = $this.next().next().find('select').eq(1);
                var text = $selectDate.val();
                var date = moment(text, 'YYYY/MM/DD');
                if (date.isValid()) {
                    $this.text(date.format('{{ 'YYYY年M月D日 (dd)'|raw }}'))
                }
            });
        };
        $(document).ready(function() {
          updateArrivalDate();
            $('select').on('change', function() {
                updateArrivalDate();
            });
        });
    </script>

如您所見，我使用raw過濾器來防止 twig 來自 escaping 日文字符。 盡管如此， twig 無論如何都會轉義特殊字符並且文本是亂碼：

當然，如果我將上面的代碼片段移到外部文件中，它就會得到解決。 但是說真的，有沒有辦法阻止 twig escaping 日文字符？ 為什么raw過濾器不起作用？

Answer 1

我認為您可以像這樣更改代碼：

$this.text(date.format('{{ "YYYY年M月D日 (dd)"|json_encode()|raw }}'))

Answer 2

如https://momentjs.com/docs/#/i18n/中所示，從 cdn（或從 npm/yarm 安裝包）導入 moment ja語言環境

如果您使用 cdn 托管的 js，請使用以下代碼：

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js" integrity="sha256-4iQZ6BVL4qNKlQ27TExEhBN1HFPvAvAMbFavKKosSWQ=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/locale/ja.js" integrity="sha256-CFWtR1hGN/5Vc+kcJkqeMFND0g6gFFZdnSqUtdL7WOQ=" crossorigin="anonymous"></script>

然后代替：

 $this.text(date.format('{{ 'YYYY年M月D日 (dd)'|raw }}'))

利用：

 var date = moment(text, 'YYYY/MM/DD');
 $this.html(date.locale('ja').format('LL (dd)'))

並刪除：

        moment.locale('ja');

線

所以你的腳本將是：

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js" integrity="sha256-4iQZ6BVL4qNKlQ27TExEhBN1HFPvAvAMbFavKKosSWQ=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/locale/ja.js" integrity="sha256-CFWtR1hGN/5Vc+kcJkqeMFND0g6gFFZdnSqUtdL7WOQ=" crossorigin="anonymous"></script>
<script>
        let updateArrivalDate = function() {
            $('.arrival-date').each(function() {
                let $this = $(this);
                $selectDate = $this.next().next().find('select').eq(0);
                $selectTime = $this.next().next().find('select').eq(1);
                let text = $selectDate.val();
                let date = moment(text, 'YYYY/MM/DD');
                if (date.isValid()) {
                    $this.text(date.locale('ja').format('LL (dd)'))
                }
            });
        };
        $(document).ready(function() {
          updateArrivalDate();
            $('select').on('change', function() {
                updateArrivalDate();
            });
        });
    </script>

請參閱下面的示例，其中僅包含有關語言的格式：

 $(document).ready(function(){ $("#date").html(moment().locale('ja').format('LL (dd)')) });

 <script src="https://momentjs.com/downloads/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/locale/ja.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="date"></div>

所以你讓時間來格式化日期並避免使用 js/twig 的任何復雜性。 保持簡單，讓 js 完成它的工作，而不是將它們混合在一起。