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

Question

我用模板串在我的web应用程序来创建可重用的HTML片段：

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

虽然我发现换行符的问题，即保持字面上所以“家”的标签收到了页面上的视觉可见的空间。发生这种情况的原因是该字符串包含换行符，它们在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>`; 

不要只是烤焦ch并替换所有换行符和空格并将其删除，因为它在html标记中不安全。