Şablon değişmez enterpolasyon boşlukları beyaz boşluk tablo

Question

Şablon değişmezlerini kullanırken tablo formatlarında bir sorun olduğunu farkettim.

böyle bir şey yaparken:

Hello World 
    Goodbye  World 

Bu daha da karmaşık için yapılır: {güle} parçası olarak dize baskılar 'Goodbye' dört harf kısa olduğu için

var hello = 'Hello', 
    bye = 'Goodbye'; 
console.log(` 
    ${hello} World 
    ${bye}  World 
`); 

diziler veya nesnelerin interpolasyonları.

Bu tür bir problemle başa çıkmanın bir yolunu bulup bulmadığını merak ediyorum. Bir dizge için aralıklı tablo biçimlendirmesi enterpolasyon sırasında tutulabilir.

---

1 Şimdi bir şablon etiketinin dizeleri ve dizileri kullandığını varsayalım. Diziler, kelimeler arasındaki boşluklarla birleştirilmiştir.

var hello = 'Hello', 
    bye = 'Goodbye', 
    phrase = ['I', 'like']; 

console.log(someTag` 
    ${hello}   World 
    ${bye}   World 
    Some things I like: 
    ${phrase}  sunsets. 
    ${['I', 'like']} candy. 
`); 

Eğer Array köşeli parantez, tırnak, dolar, küme ayracı ve böylece enterpolasyondan önce dize (görsel) uzunluğuna doğru sayıp söyleyemem Sadece durumda. Kelimeler arasındaki boşluklar enterpolasyondan sonra dize uzunluğuna doğru sayılır. Girintiler, ekstra karakterlerin kaybı ve etiket işleme sırasında karakterlerin eklenmesiyle gerçekleştirilir.

Bu sorunun cevabı kabul edildi, ancak daha fazla tartışma görmek istiyorum. Bu sorunun birden fazla cevabı olabilir.

Answer 1

Kelimelerin değişen uzunlukta telafi etmek sekmeleri kullanabilirsiniz:

const hello = 'Hello'; 
 
const bye = 'Goodbye'; 
 
const str = ` 
 
    ${hello}\t World 
 
    ${bye}\t World 
 
`; 
 

 
console.log(str); 
 
document.getElementById('demo').innerText = str;

<pre id="demo"></pre>