テンプレート文字列の改行を崩壊させる方法は？

Question

は、私は私のWebアプリケーションで再利用可能なHTMLスニペットを作成するためのテンプレートの文字列を使用します。

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

私は「ホーム」ラベルはページ上に前に視覚的に目に見えるスペースがあり、文字通りので、保管されている改行に問題を発見したけど。これは、文字列に、定数値が宣言されたmenuItemの改行が含まれているために発生します。

どのようにこれらのHTMLスニペットに改行や余白がないようにするにはどうすればよいですか？この文字列をクリーンアップ関数に渡す唯一の方法ですか、それともクリーンな状態に保つよりエレガントな自動方法ですか？

Answer 1

あなたはちょうどあなたのエディタで読みやすさを向上させたい場合、私はあなたはJavascriptテンプレート文字列を使用してはならないと思いますあなたの場合は

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

Answer 2

新しい行を削除するString Replaceメソッドを使用することができます。代わりのようなものを使用します。あなたは頼まない、まさに

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タグ内では安全ではないため、すべての改行とスペースを置き換えて削除してください。