JavaScript 程式碼中的值插值

Created: November-22, 2018

如果需要將伺服器端變數傳遞給客戶端 JavaScript（或其他需要它的語言），則插值值很有用。

對於變數，數字，字串等，你可以使用括號語法和解釋點將這些型別的變數直接傳遞到 JavaScript 中（以便不評估括號內的程式碼。）這對於引數化很有用需要伺服器內容的 JavaScript 程式碼。

在下面的示例中，我們必須將 username 包裝在引號中，以便 JavaScript 將其解釋為字串; Pug 將按原樣輸出變數的內容，因此我們需要將其放在引號中以使其成為正確的 JavaScript 字串。對於 number 來說，這不是必需的，其中 JavaScript 將解釋我們想要的數字（作為數字）。

index.js

let number   = 24;
let username = "John";
res.render("index", {
    number:   number,
    username: username
});

index.pug

html
    head
    script.
        // Sets the username of the current user to be displayed site-wide
        function setUsername(username) {
            // ...
        }
        var number   = #{number};
        var username = "#{username}";
        setUsername(username);
        
    body
        p Welcome to my site!

index.pug 輸出

<html>
    <head>
        <script>
            // Sets the username of the current user to be displayed site-wide
            function setUsername(username) {
                // ...
            }
            var number   = 24;
            var username = "John";
            setUsername(username);
        </script>
    </head>
    <body>
        <p>Welcome to my site!</p>
    </body>
</html>

如果需要插入 JavaScript 物件的值（例如，有關使用者的所有資訊），則必須將輸出字串化為 Pug，以便將其視為 JavaScript 物件。還有必要輸出變數的原始內容，而不是它的評估形式。如果你要輸出轉義變數（var user = #{JSON.stringify(user)}），你會收到一個轉義版本的物件（引號和撇號轉換為 "），這不是我們想要的 JSON.stringify 來處理它。

index.js

var myUser = {
    name:    "Leeroy Jenkins",
    id:      1234567890,
    address: "123 Wilson Way, New York NY, 10165"
};

res.render('index', {
    user: myUser
});

index.pug

doctype html
html
    head
        script.
            window.onload = function () {
                function setUsername(username) {
                    return username;
                }

                var user = !{JSON.stringify(user)};
                document.getElementById("welcome-user").innerHTML = setUsername(user.name);
            };

    body
        div(id="welcome-user")

index.pug 輸出

<!DOCTYPE html>
<html>
    <head>
        <script>
            window.onload = function() {
                function setUsername(username) {
                    return username;
                }

                var user = {
                    "name": "Leeroy Jenkins",
                    "id": 1234567890,
                    "address": "123 Wilson Way, New York NY, 10165"
                };
                document.getElementById("welcome-user").innerHTML = setUsername(user.name);
        };
        </script>
    </head>
    <body>
        <div id="welcome-user"></div>
    </body>    
</html>

#welcome-user 的 innerHTML 等於 Leeroy Jenkins。user 變數的內容直接列印到 HTML 原始碼