Question

我一直想知道是否有一种方法可以在JavaScript中定义多行字符串，就像在PHP这样的语言中一样：

var str = "here
goes
another
line";

显然这会分解解析器。我发现在换行符前放置一个反斜杠\解决了这个问题：

var str = "here\
goes\
another\
line";

或者我可以一次又一次地关闭并重新打开字符串引号。

我之所以要问，是因为我正在制作基于JavaScript的UI小部件，这些小部件利用JavaScript编写的HTML模板。在字符串中键入HTML是很痛苦的，特别是如果您需要一直打开和关闭引号。在JavaScript中定义HTML模板的好方法是什么？

我正在考虑使用单独的HTML文件和编译系统来使一切变得更容易，但是该库与其他开发人员分布在一起，因此HTML模板必须易于包含在开发人员中。

Answer 1

基本上你不需要做多行字符串。

但为什么要在javascript中定义模板？为什么不把它们放到一个文件中并且在你需要它时将ajax调用加载到变量中？

对于instantce（使用jquery）

$.get('/path/to/template.html', function(data) {
  alert(data); //will alert the template code
});

Answer 2

@slebetman，感谢您的详细示例。对substitute_strings函数的快速评论。我不得不修改

 str.replace(n,substitutions[n]);

是

 str = str.replace(n,substitutions[n]);

让它发挥作用。（jQuery版本1.5？ - 虽然它是纯粹的javascript。）

当我的模板中出现以下情况时：

$CONTENT$ repeated twice $CONTENT$ like this

我必须做额外的处理才能让它发挥作用。

 str = str.replace(new RegExp(n, 'g'), substitutions[n]);

我必须避免$（正则表达式特殊字符）作为分隔符并使用#代替。以为我会分享我的发现。

Answer 3

javascript中有几个模板系统。但是，我个人最喜欢的是使用ajax来获取XML模板。模板是XML文件，可以很容易地干净地嵌入HTML，它看起来像这样：

<title>This is optional</title>
<body><![CDATA[
    HTML content goes here, the CDATA block prevents XML errors
    when using non-xhtml html.

    <div id="more">
      $CONTENT$ may be substituted using replace() before being
      inserted into $DOCUMENT$.
    </div>
]]></body>
<script><![CDATA[
    /* javascript code to be evaled after template
     * is inserted into document. This is to get around
     * the fact that this templating system does not
     * have its own turing complete programming language.
     * Here's an example use:
     */
     if ($HIDE_MORE$) {
       document.getElementById('more').display = 'none';
     }
]]></script>

处理模板的javascript代码如下：

function insertTemplate (url_to_template, insertion_point, substitutions) {
  // Ajax call depends on the library you're using, this is my own style:
  ajax(url_to_template, function (request) {
    var xml = request.responseXML;
    var title = xml.getElementsByTagName('title');
    if (title) {
      insertion_point.innerHTML += substitute_strings(title[0],substitutions);
    }
    var body = xml.getElementsByTagName('body');
    if (body) {
      insertion_point.innerHTML += substitute_strings(body[0],substitutions);
    }
    var script = xml.getElementsByTagName('script');
    if (script) {
      eval(substitute_strings(script[0],substitutions));
    }
  });
}

function substitute_strings (str, substitutions) {
  for (var n in substitutions) {
    str.replace(n,substitutions[n]);
  }
  return str;
}

调用模板的方法是：

insertTemplate('http://path.to.my.template', myDiv, {
  '$CONTENT$' : "The template's content",
  '$DOCUMENT$' : "the document",
  '$HIDE_MORE$' : 0
});

替换字符串的$符号仅仅是一种惯例，您可以使用%的{{1}}或您喜欢的任何分隔符。只是在那里使部件被替换为明确的。

在javascript端使用替换而不是模板的服务器端处理的一个很大的好处是，这允许模板是纯静态文件。这样做的优点（除了不必编写服务器端代码）之外，您可以将模板的缓存策略设置为非常激进，这样浏览器只需在第一次加载模板时获取模板。随后使用模板将来自缓存，速度非常快。

此外，这是一个非常简单的实现示例，用于说明该机制。这不是我正在使用的。您可以进一步修改此操作以执行多次替换，更好地处理脚本块，使用for循环处理多个内容块，而不是仅使用返回的第一个元素，正确处理HTML实体等。

我真正喜欢这个的原因是HTML只是纯文本文件中的HTML。如果您直接在javascript中嵌入HTML字符串，这可以避免引用地狱和可怕的字符串连接性能问题。

Answer 4

我想我找到了一个我喜欢的解决方案。

我会将模板存储在文件中并使用AJAX获取它们。这仅适用于开发阶段。对于生产阶段，开发人员必须运行编译器一次，使用源文件编译所有模板。它还将JavaScript和CSS编译为更紧凑，并将它们编译为单个文件。

现在最大的问题是如何教育其他开发者这样做。我需要构建它以便易于理解为什么以及它们在做什么。

Answer 5

您还可以使用\ n生成换行符。然而，html将在一行上并且难以编辑。但是如果你使用PHP生成JS，那么它可能是另一种选择

JavaScript多线字符串和模板？

5 个答案: