Template Literal Interpolation bricht Whitespace-Tabelle

Question

Bei Verwendung von Vorlagenliteralen bemerkte ich ein Problem mit Tabellenformaten.

Wenn so etwas wie dies zu tun:

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

Da der {bye} Teil vier Buchstaben kurz von ‚Auf Wiedersehen‘ ist die Zeichenfolge druckt wie:

Hello World 
    Goodbye  World 

Dies wird noch komplizierter für Interpolationen von Arrays oder Objekten.

Ich frage mich, ob jemand einen Weg gefunden hat, mit dieser Art von Problem umzugehen. Die Tabellenformatierung für eine Zeichenfolge kann während der Interpolation beibehalten werden.

---

Angenommen, ein Template-Tag verwendet Zeichenfolgen und Arrays. Die Arrays sind mit Leerzeichen zwischen Wörtern verkettet.

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

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

Gerade falls Sie dem Array eckige Klammer können nicht sagen, Zitaten, Dollar, geschweifte Klammer, und so weiter Zählung in Richtung der Länge der Saite (visuell) vor der Interpolation. Leerzeichen zwischen Wörtern zählen nach der Interpolation zur Zeichenfolgenlänge. Die Einzüge werden durch den Verlust der zusätzlichen Zeichen und das Hinzufügen von Zeichen während der Tag-Verarbeitung bewirkt.

Diese Frage hat eine akzeptierte Antwort, aber ich würde gerne mehr Diskussion sehen. Es kann mehr als eine Antwort auf dieses Problem geben.

Answer 1

können Sie Registerkarten für die unterschiedlichen Länge der Wörter zu kompensieren:

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>