如何使模板字符串換行符被摺疊？

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標記中不安全。