javascript - 如何删除 lodash 模板创建的换行符？

Question

我正在从 lodash 模板(使用 webpack)渲染 HTML，但 lodash 模板正在创建新的换行符。美化 HTML 没有任何帮助，因为这些行并不是“错误”。

我使用什么:

<!-- Theme
============================================= -->
<%if (theme == "main") { %>
<link rel="stylesheet" href="css/theme.css" />
<% } %>

结果。 HTML 上方和下方的新换行符 <link>

<!-- Theme
============================================= -->

<link rel="stylesheet" href="css/theme.css" />

这就是我想要的方式，上面和下面没有任何换行符:

<!-- Theme
============================================= -->
<link rel="stylesheet" href="css/theme.css" />

有一种技巧可以像这样在一行中完成所有操作，但是如果代码很长，这会变得很难看。

<!-- Theme
============================================= -->
<%if (theme == "main") { %><link rel="stylesheet" href="css/theme.css" /><% } %>

Answer 1

您可以使用_.trim()从结果的开头和结尾删除\n，并使用_.replace() > 使用 RegExp 将多个连续的 \n 转换为单个:

const str = `<!-- Theme
============================================= -->
<%if (theme == "main") { %>
<link rel="stylesheet" href="css/theme.css" />
<% } %>`;

const compiled = _.template(str);

const fn = _.flow([
  compiled,
  str => _.trim(str, '\n'),
  str => _.replace(str, /(\n)\1+/, '$1'),
]);

const result = fn({ 'theme': 'main' });

console.log(result);

.as-console-wrapper {
  top: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>