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

【问题标题】：How to concatenate strings with quotes to another string with multiple quotes on JS如何在JS上将带引号的字符串连接到另一个带多个引号的字符串
【发布时间】：2020-04-30 17:35:09
【问题描述】：

我正在尝试编写 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 标签。

【问题讨论】：

其实问题是，你不能在JS变量名中使用'-'。我已经更新了我的答案。

标签： javascript string concatenation

【解决方案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>';

【讨论】：

没用。给我错误：SyntaxError：意外令牌：标识符
你能分享你声明的这些变量的整段代码吗？
这并没有给出任何错误，而是给出了这个最终输出html，这是错误的：data-content="<a href=" my="" app="" url"="" data-original-title="" title="">New York City <a href="/my/app/url">Los Angeles</a>"76</div>
我认为这里缺少一些东西，您是否将它与您的主要“数据”字符串连接起来，您是如何做到的？你能和我分享一下吗？
是的，正确，var data 是所有这些字符串的组合。它是一根巨大的巨弦。我正在尝试创建 <td> 元素。我的问题是我是如何做到这一点的 - 在之前声明变量并将它们一一加入

【解决方案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>';

【讨论】：

【解决方案3】：

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

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

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

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

【讨论】：