Question

使用模板文字时，我注意到表格格式存在问题。

做这样的事情时：

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

因为{bye}部分是四个字母而不是＆＃39;再见＆＃39;字符串打印为：

    Hello    World
    Goodbye      World

对于数组或对象的插值，这变得更加复杂。

我想知道是否有人找到了解决此类问题的方法。在插值期间可以保留字符串的间隔表格式。

现在假设模板标签使用字符串和数组。数组与单词之间的空格连接在一起。

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

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

万一你不能告诉数组方括号，引号，美元，大括号等在插值前计算字符串的长度（视觉上）。插值后，单词之间的空格计入字符串长度。缩进是通过丢失额外字符以及在标记处理过程中添加字符来实现的。

这个问题有一个公认的答案，但我想看到更多的讨论。这个问题可以有不止一个答案。

Answer 1

您可以使用标签来补偿单词的不同长度：

＆＃13;

const hello = 'Hello';
const bye = 'Goodbye';
const str = `
    ${hello}\t World
    ${bye}\t World
`;

console.log(str);
document.getElementById('demo').innerText = str;

＆＃13;

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

＆＃13;

模板文字插值打破空白表

1 个答案: