Литеральная интерполяция шаблона разбивает таблицу пробелов

При использовании литералов шаблонов я заметил проблему с форматами таблиц.

Когда вы делаете что-то вроде этого:

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

Поскольку часть {bye} на четыре буквы меньше слова «До свидания», строка выводится как:

    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.
`);

На всякий случай вы не можете сказать, что квадратные скобки массива, кавычки, доллар, фигурная скобка и т. д. учитываются в длину строки (визуально) перед интерполяцией. Пробелы между словами учитываются в длине строки после интерполяции. На отступы влияет потеря лишних символов и добавление символов во время обработки тега.

На этот вопрос есть принятый ответ, но я хотел бы увидеть больше обсуждения. У этой проблемы может быть более одного ответа.


javascript ecmascript-6 template-literals
person Quentin Engles    schedule 25.03.2016    source источник
comment
Как вы решите это без шаблонных строк?   -  person thefourtheye    schedule 25.03.2016
comment
Очень забавно. Для такого рода вещей существуют средства форматирования таблиц и заполнители, но я не ожидал такой же проблемы со строками шаблонов, которые известны тем, что бережно относятся к пробелам. Кроме того, что, если вставки требуются какой-либо другой функцией тега, а средство форматирования/заполнения таблицы просто создает строку. Да, проблема была решена в другом месте, но это совершенно новый тип проблемы для этих шаблонных литералов. Я полагаю, что другой вариант — просто не использовать их для такого рода вещей.   -  person Quentin Engles    schedule 25.03.2016
comment
Литералы шаблонов по умолчанию ничего не делают с пробелами, они ведут себя как строки с интерполяцией. Если вам нужно более продвинутое поведение, вам нужно использовать помеченный литерал шаблона для выполнения нужного преобразования.   -  person loganfsmyth    schedule 25.03.2016
comment
@loganfsmyth я знаю. Длина строки теряется в символах ${} и различных других операциях внутри тега шаблона. Иногда это тоже становится длиннее.   -  person Quentin Engles    schedule 26.03.2016

Ответы (1)


arrow_upward
2
arrow_downward

Вы можете использовать вкладки, чтобы компенсировать разную длину слов:

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>

person Ori Drori    schedule 25.03.2016
comment
Это простое решение. Спасибо. Что делать, если отступ неизвестен (вместо него пробелы) при передаче в библиотеку? Иногда табуляция визуально состоит из 4 пробелов, а иногда из 8, может быть, из 2. Это также может помешать, если будет предпринята попытка замены пробелов табуляцией. Я предполагаю, что может быть выброшена ошибка, если нет символов табуляции, но я надеюсь на решение проблемы с неизвестными пробелами. - person Quentin Engles; 26.03.2016
comment
Вы можете комбинировать одну вкладку и несколько пробелов. Вкладка будет охватывать промежуток между переменной длиной строки и пробелами запрошенного заполнения. Это не будет идеально, но это будет близко к тому, что вам нужно. - person Ori Drori; 26.03.2016
comment
Есть несколько небольших настроек, которые работают до тех пор, пока вы знаете, что строка всегда будет одной и той же (обычно вывод справки). Мне хочется, чтобы было что-то вроде html, но для вывода из командной строки. - person Quentin Engles; 26.03.2016