【问题标题】：Templated HTML creating web page, but inserting space between each letter (number, etc) outputted模板化 HTML 创建网页，但在输出的每个字母（数字等）之间插入空格
【发布时间】：2019-04-26 16:34:08
【问题描述】：

我正在开发模板化 HTML 的版本，如 https://developers.google.com/apps-script/guides/html/templates 中所述。我的代码让我一直到一个格式正确的网页，但有一个小问题：代码在每个项目之间粘贴了一个空格。所以，我得到的是“an n i t e m”而不是“an item”。（实际输出截图如下。）

我怀疑罪魁祸首在下面也转载的html文件中。

我研究了模板化的 html 和“空白”、“插入的空格”等，但找不到其他人遇到过这个问题。

最小的完整可验证示例：

索引.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
<table>
    <ul type="square">
      <? for (var i = 0; i < data.length; i++) { ?>
          <li><? for (var j = 0; j < data[i].length; j++) { ?>
            <?= data[i][j] ?>
          <? } ?></li><br>
      <? } ?>
    </ul>
    </table>
  </body>
</html>

data 来自

代码.gs

function doGet(){
    var instrument = "Martin D-18 (↓1/2)"; 
    var tuning = "Drop D";
    var key ="Db";
    var t = HtmlService.createTemplateFromFile('Index');
    t.data = [instrument, tuning, key];
    return t.evaluate();
}

在现实世界中，变量 instrument、tuning、key 是从我的电子表格中检索到的简单字符串，但如果我将它们替换为如上所示的字符串类型的变量，我能够重现相同的问题。

更新 -

re monofont 没有问题。这是脚本中的日志，显示了 html 正在解析的基础变量。如您所见，没有不合适的空格。

[19-04-26 13:27:24:743 EDT] instrument = Martin D-18 (↓1/2)
[19-04-26 13:27:24:743 EDT] tuning = Drop D
[19-04-26 13:27:24:744 EDT] settings = 
[19-04-26 13:27:24:744 EDT] key = Db
[19-04-26 13:27:24:745 EDT] chord = D

【问题讨论】：

您是否尝试过删除样式表以确保不是某种字符间距？
我认为问题是由于您在打开和关闭脚本之间留下的空白......我真的不知道 google-apps-script，但这似乎是一个问题。 ..
如果这是 PHP 代码，那么这肯定是问题所在。之间可以有空格，它们不会显示在 HTML 中，但如果 HTML 中有空格，它可能会显示。例如，我使用“可能”而不是“将”，因为 HTML 不会呈现连续的空格。
在我添加 CSS 之前问题就存在了。是的，绝对是空格。如果您将页面复制并粘贴到文字处理器中，实际上每个页面之间都有空格。
谢谢。会牢记@TheMaster

标签： html google-apps-script web-applications

【解决方案1】：

问题：

data 是一维数组。您以嵌套方式对其进行了两次迭代。

如果data[i](for i =0) 是字符串，

data[0] "Martin D-18 (↓1/2)"

data[i][j] 将是字符串：

data[0][0] M
data[0][1] a
data[0][2] r
data[0][3] t
data[0][4] i
data[0][5] n
data[0][6]
data[0][7] D
data[0][8] -
data[0][9] 1
data[0][10] 8
data[0][11]
data[0][12] (
data[0][13] ↓
data[0][14] 1
data[0][15] /
data[0][16] 2
data[0][17] )

因为字符串和数组一样是可迭代的。

解决办法：

data 数组中的每个元素循环一次。

片段：

<? for (var i = 0; i < data.length; i++) { ?>
  <li><?= data[i] ?></li><br>
<? } ?>

【讨论】：

我知道我不应该在这个网站上热情洋溢和感恩，但是，哇。感谢@TheMaster 和 ndvo 提供的专业知识和时间。因为现在我对发生的事情有了更多了解，并且我的关键任务问题得到了解决！

【解决方案2】：

避免在 HTML 中添加额外的空格很重要。

里面您可以添加任意数量的空格，但它之外的空格是 HTML 中的空格，将由浏览器呈现。

此代码删除了这些多余的空格。

  <? for (var i = 0; i < data.length; i++) { ?>
      <li><? for (var j = 0; j < data[i].length; j++) { 
        ?><?= data[i][j] ?><?
       } ?></li><br>

  <? } ?>

但是this answer 更好。问题不仅在于 HTML 中的空格，还在于对字符串的迭代。

【讨论】：

试过了。没爱。静止空间。
说实话，如果我知道这个脚本中发生了什么，这对我来说会更清楚。是“i”字母（或单个离散元素，无论是字母、数字、标点符号）和“j”离散词还是什么？
让我试着分解一下。 “var i =0”创建一个名为“i”的变量并在其中存储0，即“i”等于0。当您调用“data[i]”时，您是在询问数据中的第i个位置。数据必须类似于 ['a','b','c'] 并且 'a' 位于第零位，因此 data[0] 是 'a'。 “for”用于多次运行此代码。第一次 i 为 0，第二次 i 为 1，依此类推，直到不再小于 data.length "i
当 j 不再小于 data[0].length "j