忽略 JavaScript 引用内容中的空格

Question

document.querySelector( "style" ).innerHTML +=
"html {" +
"  background-color: #0dd;" +
"}";

html {
  background-color: #fff;
  font-family: Arial;
}
body {
  display: flex;
  justify-content: center;
}
td {
  background-color: #fafafa;
}
th:first-child, td:first-child {
  border-left-style: none;
}
th:last-child, td:last-child {
  border-right-style: none;
}
th:first-child {
  border-top-left-radius: 1rem;
}
th:last-child {
  border-top-right-radius: 1rem;
}
tr:last-child td {
  border-bottom-style: none;
  background-color: #efefef;
}
tr:last-child td:first-child {
  border-bottom-left-radius: 1rem;
}
tr:last-child td:last-child {
  border-bottom-right-radius: 1rem;
}

<html>
  <head>
    <style>
      ::selection {
        background-color: #0df; color: #0df;
      }
      table, th, td {
        padding: 1rem;
        border-style: solid;
        border-color: #eee;
        border-collapse: collapse;
      }
      table {
        margin-top: 1rem;
        border-style: none;
      }
      th {
        border-top-style: none;
        border-color: #111;
        background-color: #222;
        color: #fff;
        border-bottom-color: #fff;
      }
    </style>
  </head>
  <body>
    <table>
      <tr> <th>One</th><th>Two</th><th>Three</th> </tr>
      <tr> <td>four</td> <td>five</td><td>six</td> </tr> 
      <tr> <td>seven</td> <td>eight</td><td>nine</td> </tr>  
    </table>
  </body>
</html>

document.querySelector( "style" ).innerHTML +=
"html {" +
"  background-color: #0dd;" +
"}";

我有大量 HTML/CSS 文件，我想将它们“注入”到网页的某些部分，就像我在本例中使用 style 标记所做的那样。

我希望像这样保持这些文件不变：

document.querySelector( "style" ).innerHTML += "
  html {
    background-color: #0dd;
  }
";

无需将每 JavaScript 行用引号引起来并在每行末尾添加 + 运算符。

我是否必须将我的所有代码都转换成这种格式？或者在 JavaScript 中有没有办法将此 HTML/CSS 代码按原样添加到元素中；无需逐行更改原始代码的格式？

与这里具体的CSS和HTML代码无关。我只是用它作为例子。

Answer 1

您可以使用Template literals

模板文字是允许嵌入表达式的字符串文字。您可以使用它们的多行字符串和字符串插值功能。

使用普通字符串，您必须使用以下语法才能获得多行字符串：

console.log('string text line 1\n' +
'string text line 2');
// "string text line 1
// string text line 2"

使用模板字面量，你可以这样做：

console.log(`string text line 1
string text line 2`);
// "string text line 1
// string text line 2"

你的情况：

document.querySelector( "style" ).innerHTML +=
`html { 
  background-color: #0dd;
}`;

忽略 JavaScript 引用内容中的空格

Ignore whitespace within JavaScript quote content

html

javascript

css

whitespace