如何在JS上将带引号的字符串连接到另一个带多个引号的字符串

Question

我正在尝试编写JS代码，我必须将多个字符串与其中的变量连接起来，以形成一个巨大的字符串。

var another_class = 'datatables-more';
var color = "#e07c8a";
var NYC = "New York City";
var LA = "Los Angeles";
var url = "/my/app/url2";
var some_url = "/my/app/url";
var row_count = row['available_count'];
data = '<td><div class="' + another_class + 'item-count-div" style="background-color:' + color + '"' + ' data-url="' + url + '"' + ' data-toggle="popover" data-content="" + row_count + '</div></td>'; 

现在，对于data-content属性，我希望它的值为：

data-content = "<a href="some_url">NYC</a> <a href="some_url">LA</a>"

some_url、NYC、LA都是变量。我怎样才能达到这个结果？我很难弄清楚这一点。

我试过这样做：

data-content="<a href="'+some_url+'">'+NYC+'</a>"' 

这不起作用，给了我一个奇怪的ahref标签。

Answer 1

如果您使用的是较新的版本，您可以参考以前的答案，否则您可以执行以下操作：

更新：以下代码运行良好。这是html引起的问题。

var another_class = 'datatables-more';
var color = "#e07c8a";
var NYC = "New York City";
var LA = "Los Angeles";
var url = "/my/app/url2";
var some_url = "/my/app/url";
var row_count = row['available_count'];
var dataContent = '<a href=''+some_url+''>'+NYC+'</a> <a href=''+some_url+''>'+LA+'</a>';
var data = '<td> <div class="' + another_class + ' item-count-div" style="background-color:'+ color + ';" data-url="' + url + '" data-toggle="popover" data-content="'+dataContent+'" >' + row_count + '</div></td>';

Answer 2

data = '<td> <div class="' + another_class + 'item-count-div" style="background-color:' 
+ color + ';"' + ' data-url="'+url+'" data-toggle="popover" data-content="<a 
href="'+url+'">NYC</a>  <a href="'+url+'">LA</a>" >' + row_count + '</div></td>';

Answer 3

如果您使用的是较新版本的JS，您可以使用字符串模板文字，如下所示：

const data = `<a href="${var1}">${var2}</a>`

另一种方法是使用数组和连接函数，如下所示：

const parts = ['<a href="', var1, '">", var2, '</a>'];
const data = parts.join('');