创建包含 HTML 的函数

Question

我正在尝试创建一个 Coffescript 函数，该函数包含我页面中经常重复使用的对象的通用 HTML。我将一个变量传递给函数，其中包含我想要每次更改的文本。每次我尝试编译我的 Coffeescript 时，都会收到此错误：

[stdin]:6:5: error: unexpected identifier
<p>"text1"</p>
    ^^^^^

这是我的代码

text1 = "Some text"

ballon1 = (text1) ->
"<a href=\"#balloon1\">Open Modal</a>
<blockquote class=\"balloon\" id=\"balloon1\">
<p>"text1"</p>
<a href=\"#close\" title=\"Close\" class=\"close\">X</a>
</blockquote>"

我希望输出是：

<a href="#balloon1">Open Modal</a>
<blockquote class="balloon" id="balloon1\">
<p>Some text</p>
<a href="#close" title="Close" class="close">X</a>
</blockquote>

有什么想法吗？我试图找到适合这份工作的语言；也许我应该改用 PHP？另外，我使用 Javascript 是因为我认为代码需要在客户端运行，因为我想根据单击的链接和时间将不同的文本传递给函数。

Answer 1

因为这是 CoffeeScript，你可以使用string interpolation:

ballon1 = (text1) ->
  "<a href=\"#balloon1\">Open Modal</a>
  <blockquote class=\"balloon\" id=\"balloon1\">
  <p>#{text1}</p>
  <a href=\"#close\" title=\"Close\" class=\"close\">X</a>
  </blockquote>"

您还可以在 HTML 中切换到单引号以避免所有反斜杠：

ballon1 = (text1) ->
  "<a href='#balloon1'>Open Modal</a>
  <blockquote class='balloon' id='balloon1'>
  <p>#{text1}</p>
  <a href='#close' title='Close' class='close'>X</a>
  </blockquote>"

或者，如果你和我一样认为单引号在 HTML 中看起来很有趣，你可以为你的 HTML sn-p 使用块字符串：

ballon1 = (text1) ->
  """
    <a href="#balloon1">Open Modal</a>
    <blockquote class="balloon" id="balloon1">
      <p>#{text1}</p>
      <a href="#close" title="Close" class="close">X</a>
    </blockquote>
  """

块字符串甚至可以让您很好地缩进 HTML 以提高可读性。这是我可能会使用的版本。

Answer 2

如果你想要字符串连接，你想要+ 操作符：

ballon1 = (text1) ->
  "<a href=\"#balloon1\">Open Modal</a>
  <blockquote class=\"balloon\" id=\"balloon1\">
  <p>" + text1 + "</p>
  <a href=\"#close\" title=\"Close\" class=\"close\">X</a>
  </blockquote>"

变化在第四行。

也就是说，如果经常出现这种情况，您可能会考虑研究模板库。这样（其中很多）您可以在 HTML 编辑器中编写模板，将它们嵌入到您的页面中，而不必为引号字符转义而烦恼。