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 源代码