创建包含 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

如果要字符串连接，则需要 + 运算符：

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

由于这是 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 代码段使用块字符串：

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 的函数

Creating functions containing HTML

html

javascript

string

function

coffeescript