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

时间:2011-09-08 07:01:49

标签: javascript string concatenation string-concatenation

我正在尝试设置一个脚本来连接字符串中的一些变量(如果它们存在),以便将相应的元数据标记放入呈现的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 ()。

我最好如何将这些语句添加到我的串联字符串中?

5 个答案:

答案 0 :(得分:46)

我使用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>"
;

答案 1 :(得分:5)

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>";

答案 2 :(得分:5)

我可能会做一些不同的事情(更像是模板化),主要是因为我讨厌使用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 : "");

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

答案 3 :(得分:1)

将整个文档构建为数组,然后在最后加入"\n"。 (这个的基本原理当然是没有分散很多新的行!如果你在IE7或更低版​​本,Array#join比重复的字符串连接要快得多。)

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

更新我忘了在第一个小提琴中加入“para”。带有para的代码在这里: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);

答案 4 :(得分:1)

我喜欢Demian Brecht回答的可读性,但我只会更改正则表达式的字符串,因为replace()函数只替换第一个匹配(请参阅此处更多内容: JavaScript .replace only replaces first Match

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 : "");