用 JavaScript 中的 if 语句连接字符串答案

【问题标题】：Concatenating strings with `if` statements in JavaScript用 JavaScript 中的 if 语句连接字符串
【发布时间】：2011-11-12 17:53:04
【问题描述】：

我正在尝试设置一个脚本来连接字符串中的一些变量如果它们存在，以便将适当的元数据标签放入呈现的 HTML 文档中。

我的连接码是：

data = "<html>\n<head>\n" + "</head>\n<body>\n\n" + paras.join("\n\n") + "\n\n</body>\n</html>";

我正在尝试将如下if 语句添加到其中（在第一项和第二项之间）：

if (typeof metadata_title !== "undefined") {
    "<title>" + metadata_title + "</title>\n"
}
if (typeof metadata_author !== "undefined") {
    "<meta name=\"author\" content=\"" + metadata_author + "\"></meta>\n"
}
if (typeof metadata_date !== "undefined") {
    "<meta name=\"date\" content=\"" + metadata_date + "\"></meta>\n"
}

但我不能将这些语句中的任何一个直接添加到串联代码中（它会引发错误：Unexpected token (）。

如何最好地将诸如此类的语句添加到我的串联字符串中？

【问题讨论】：

标签： javascript string concatenation string-concatenation

【解决方案1】：

我会使用ternary operator：

data = "<html>\n"
     + "<head>\n" 
     + ( typeof metadata_title  !== "undefined" ?  "<title>" + metadata_title + "</title>\n"                             : "" )
     + ( typeof metadata_author !== "undefined" ?  "<meta name=\"author\" content=\"" + metadata_author + "\"></meta>\n" : "" )
     + ( typeof metadata_date   !== "undefined" ?  "<meta name=\"date\" content=\"" + metadata_date + "\"></meta>\n"     : "" )
     + "</head>\n"
     + "<body>\n"
     + "\n"
     + paras.join("\n\n")
     + "\n"
     + "\n"
     + "</body>\n"
     + "</html>"
;

【讨论】：

typeof 的用法感到困惑。为什么不直接检查var 是 undefined?..
在特殊情况下 (var undefined = 'test';) 结果是错误的。使用typeof 更省钱。
如果其中一个变量根本没有定义，你会得到一个ReferenceError。我认为这就是 OP 的想法。当然，如果定义了所有三个元数据，你的就很好了。

【解决方案2】：

data = "<html>\n<head>\n" 
    + (
        typeof metadata_title !== "undefined" ?
        "<title>" + metadata_title + "</title>\n" :
        ""
    )
    + (
        typeof metadata_author !== "undefined" ?
        "<meta name=\"author\" content=\"" + metadata_author + "\"></meta>\n" :
        ""
    )
    + (
        typeof metadata_date !== "undefined" ?
         "<meta name=\"date\" content=\"" + metadata_date + "\"></meta>\n" :
        ""
    )
    + "</head>\n<body>\n\n" 
    + paras.join("\n\n") 
    + "\n\n</body>\n</html>";

【讨论】：

【解决方案3】：

我可能会做一些不同的事情（更类似于模板），主要是因为我讨厌使用 Javascript 完成的串联 HTML：

var metadata_title = "Hello";
var metadata_author = "Me";
var metadata_date = "2011-09-07";

var template = "<html>\
            <head>\
                <title>#title#</title>\
                <meta name=\"author\" content=\"#author#\"></meta>\
                <meta name=\"date\" content=\"#date#\"></meta>\
            </head>\
            <body>\
            </body>\
            </html>";

var data = template.replace("#title#", metadata_title != undefined ? metadata_title : "")
                   .replace("#author#", metadata_author != undefined ? metadata_author : "")
                   .replace("#date#", metadata_date != undefined ? metadata_date : "");

当然，有非常少量的额外开销，但对我来说，它方式更具可读性。

【讨论】：

你怎么会在这里得到“paras”？（并不是说这很难；我只是想看看在没有真正的临时引擎的情况下你会想出什么。干杯。）
除非我缺少某些东西（已经很晚了，我需要睡觉），我很可能只是在 body 标签之间添加 #paras# 并将其替换为替换其他元素的方式相同。join 只返回一个字符串，所以我假设它会起作用。

【解决方案4】：

将整个文档构建成一个数组，然后在末尾加入"\n"。（这样做的理由当然是不要散布很多新行！如果您使用的是 IE7 或更低版本，Array#join 比重复的字符串连接要快得多。）

此处代码：http://jsfiddle.net/ZCbCZ/

更新我忘了在第一个小提琴中包含“paras”。带 paras 的代码在这里：http://jsfiddle.net/U8325/1/

对于那些不想点击并尝试的人，这里是脚本：

// Not going to define metadata_author just to be saved by typeof :-)
var metadata_title = "Hello";
var metadata_date = "2011-09-07";

// Okay 3 paras for fun
var paras = ["<p>paragraph1</p>", "<p>paragraph2</p>", "<p>paragraph3</p>"];

data = ["<html>", "<head>"]

if (typeof metadata_title !== "undefined") {
    data.push("<title>" + metadata_title + "</title>");
}
if (typeof metadata_author !== "undefined") {
    data.push("<meta name=\"author\" content=\"" + metadata_author + "\"></meta>");
}
if (typeof metadata_date !== "undefined") {
    data.push("<meta name=\"date\" content=\"" + metadata_date + "\"></meta>");
}

data.push("</head>");
data.push("<body>");
paras.forEach(function (p) {data.push(p);});   // Requires ES5; use a for-loop if you don't have it
data.push("</body>");
data.push("<html>");
data = data.join("\n");
alert(data);

【讨论】：

【解决方案5】：

我喜欢 Demian Brecht 答案的可读性，但我只会更改 regex 的字符串，因为 replace() 函数只替换第一个匹配项（在此处查看更多信息：@987654322 @)

var metadata_title = "Hello";
var metadata_author = "Me";
var metadata_date = "2011-09-07";

var template = "<html>\
            <head>\
                <title>#title#</title>\
                <meta name=\"author\" content=\"#author#\"></meta>\
                <meta name=\"date\" content=\"#date#\"></meta>\
            </head>\
            <body>\
            </body>\
            </html>";

var data = template.replace(/#title#/g, metadata_title != undefined ? metadata_title : "")
                   .replace(/#author#/g, metadata_author != undefined ? metadata_author : "")
                   .replace(/#date#/g, metadata_date != undefined ? metadata_date : "");

【讨论】：