时间戳

首页 > 解决方案 > 在 JavaScript 中格式化 HTML、CSS 和 JavaScript 代码的最佳方式是什么

javascript - 在 JavaScript 中格式化 HTML、CSS 和 JavaScript 代码的最佳方式是什么

问题描述

我需要能够将代码放在 ace 编辑器的 div 部分中。忽略代码以便我可以轻松输入字符串格式的最佳方法是什么？

我尝试了多种风格的引号

      editorHTML.setValue('<html>
      <head>
        <meta charset=utf-8>
        <title>HTML5 canvas demo</title>

      </head>
      <body>
        <p>Canvas pane goes here:</p>
        <canvas id=pane width=300 height=200></canvas>
        <script>

        </script>
      </body>
    </html>');
     editorCSS.setValue('p {font-family: monospace;}
');
     editorJavaScript.setValue('var canvas = document.getElementById('pane');
          var context = canvas.getContext('2d');

          context.fillStyle = 'rgb(250,0,0)';
          context.fillRect(10, 10, 55, 50);

          context.fillStyle = 'rgba(0, 0, 250, 0.5)';
          context.fillRect(30, 30, 55, 50);
');

此代码不起作用。我假设有一种非常简单的方法可以做到这一点，但搜索后我找不到它。

标签： javascripthtmlcss

解决方案

你有两个问题：

  • JavaScript 不允许在字符串文字中使用原始换行符。

  • 您的最后一个字符串被引用，'但其中包含未转义'的 s。

你至少有三个选择：

  1. 在现代 JavaScript (ES2015+) 中，您可以使用模板文字。模板文字中允许未转义的换行符。未标记的模板文字会创建一个字符串。

  2. 您可以使用反斜杠转义换行符。

  3. 您可以使用字符串连接。

#1 的示例：

editorHTML.setValue(`<html>
  <head>
    <meta charset=utf-8>
    <title>HTML5 canvas demo</title>

  </head>
  <body>
    <p>Canvas pane goes here:</p>
    <canvas id=pane width=300 height=200></canvas>
    <script>

    </script>
  </body>
</html>`);
editorCSS.setValue(`p {font-family: monospace;} `);
editorJavaScript.setValue(`var canvas = document.getElementById("pane");
      var context = canvas.getContext("2d");

      context.fillStyle = "rgb(250,0,0)";
      context.fillRect(10, 10, 55, 50);

      context.fillStyle = "rgba(0, 0, 250, 0.5)";
      context.fillRect(30, 30, 55, 50);
`);

#2 的例子：

editorHTML.setValue('<html>\
  <head>\
    <meta charset=utf-8>\
    <title>HTML5 canvas demo</title>\
\
  </head>\
  <body>\
    <p>Canvas pane goes here:</p>\
    <canvas id=pane width=300 height=200></canvas>\
    <script>\
\
    </script>\
  </body>\
</html>');
editorCSS.setValue('p {font-family: monospace;} ');
editorJavaScript.setValue('var canvas = document.getElementById("pane");\
      var context = canvas.getContext("2d");\
\
      context.fillStyle = "rgb(250,0,0)";\
      context.fillRect(10, 10, 55, 50);\
\
      context.fillStyle = "rgba(0, 0, 250, 0.5)";\
      context.fillRect(30, 30, 55, 50);\
');

#3 的例子：

editorHTML.setValue('<html>' +
  '<head>' +
    '<meta charset=utf-8>' +
    '<title>HTML5 canvas demo</title>' +
    '' +
  '</head>' +
  '<body>' +
    '<p>Canvas pane goes here:</p>' +
    '<canvas id=pane width=300 height=200></canvas>' +
    '<script>' +
    '' +
    '</script>' +
  '</body>' +
'</html>');
editorCSS.setValue('p {font-family: monospace;} ');
editorJavaScript.setValue('var canvas = document.getElementById("pane");' +
      'var context = canvas.getContext("2d");' +
      '' +
      'context.fillStyle = "rgb(250,0,0)";' +
      'context.fillRect(10, 10, 55, 50);' +
      '' +
      'context.fillStyle = "rgba(0, 0, 250, 0.5)";' +
      'context.fillRect(30, 30, 55, 50);'
);

推荐阅读