Question

我使用模板字符串在我的webapp中创建可重用的html片段：

const menuItem = `<li>
                      <a href="#">Home</a>
                  </li>`

虽然我发现字面上保留了换行符的问题所以“Home”标签在页面上有一个视觉上可见的空间。之所以发生这种情况，是因为字符串包含新行，它们位于声明的menuItem常量值中。

如何让这些html代码片段中没有换行符和额外空格？是通过清理函数传递此字符串的唯一方法，还是有更优雅的自动方式来保持清洁？

Answer 1

您可以使用String Replace方法删除新行在你的情况下

const menuItem = `<li>
                      <a href="#">Home</a>
                  </li>`.replace(/^\s+/mg, "");

Answer 2

如果您只想提高编辑器的可读性，我认为您不应该使用Javascript模板字符串。而是使用类似的东西：

let menuItem = '<li>' +
                  '<a href="#">Home</a>' +
               '</li>'

不完全是你要求的，但是如果你必须有条件地连接字符串，你应该做那样的事情而不关心格式化：

const menuItem = []
menuItem.push('<li>')
menuItem.push('<a href="#">Home</a>')
if(moreMenuItems) {
  menuItem.push('<a href="#">Contact</a>')
}
menuItem.push('</li>')
menuItem.join('')

另一种方法是实现自定义标记模板字符串函数，该函数接收您的字符串并删除所有不必要的换行符和空格：

function html(strings, ...values) {
  // Parse html snippet and remove unnecessary spaces and newlines
  return strings;
}

html`<li>
        <a href="#">Home</a>
     </li>`;

不要只搜索和替换所有换行符和空格并删除它们，因为它在html标记内不安全。

如何使模板字符串换行符折叠？

2 个答案: