Как правильно выровнять текст в консоли браузера?

У меня стоит задача взять значения из подсказки и поставить как на картинке, но я не очень понимаю, как сделать все на одном уровне, например, чтобы '|' всегда был под плюсом, не обращая внимания на длину слова.

Мой результат:

var arr = []
for (var i = 0; i >= 0; i++) {
    var input = prompt('Enter any value (enter end to complete the operation) ');
    if (input === 'end') break;
    arr[i] = input;
}

console.log(arr)

for (var i = 0; i < arr.length; i++) {
    console.log(`+-----------------+---------------------+ \n|      ${arr[i]}      |`)
}

Можете ли вы показать код, который у вас есть до сих пор?

John Kugelman 20.11.2022 00:12

Вам нужно будет подумать о том, сколько символов содержит ваш контент, а затем соответствующим образом настроить количество пробелов. Однако разные шрифты будут иметь переменную ширину для каждого символа, например. I занимает меньше места, чем H.

David Min 20.11.2022 00:15

Для подобных задач почти наверняка есть проверенная в бою библиотека: npmjs.com/package/easy-table

Eric Haynes 20.11.2022 01:26
Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Если вы веб-разработчик (или хотите им стать), то вы наверняка гик и вам нравятся "Звездные войны". А как бы вы хотели, чтобы фоном для вашего...
учебник по Javascript
учебник по Javascript
JavaScript - это язык программирования, который обычно используется для добавления интерактивности и других динамических функций на веб-сайты. Он...
Как использовать d3.js для рисования 2D SVG-элементов в приложении Angular?
Как использовать d3.js для рисования 2D SVG-элементов в приложении Angular?
D3.js - это обширная библиотека, используемая для привязки произвольных данных к объектной модели документа (DOM). Мы разберем основные варианты...
Освоение принципов SOLID в JavaScript: Пошаговое руководство
Освоение принципов SOLID в JavaScript: Пошаговое руководство
Принцип единой ответственности (SRP): класс должен иметь только одну причину для изменения. Другими словами, у него должна быть только одна...
JavaScript - For Loop
JavaScript - For Loop
Наиболее используемая компактная форма оператора цикла.
Неделя 1 - Карточки с временной шкалой
Неделя 1 - Карточки с временной шкалой
Поскольку это была первая неделя, я решил начать с простого. Предполагалось, что у меня будет временная шкала с несколькими карточками, которые можно...
0
3
93
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Вы можете сделать что-то подобное, но шрифты имеют переменную ширину, поэтому я не ожидаю, что это сработает на 100%.

var maxLength = 21;
var arr = []
for (var i = 0; i >= 0; i++) {
  var input = prompt('Enter any value (enter end to complete the operation) ');
  if (input === 'end') break;
  arr[i] = input;
}

console.log(arr)

for (var i = 0; i < arr.length; i++) {
  console.log(`+${'-'.repeat(maxLength-1)}+${'-'.repeat(maxLength-1)}+ \n|${' '.repeat((maxLength-arr[i].length)/2)}${arr[i]}${' '.repeat((maxLength-arr[i].length)/2)}|`)
}

Например, число 2 шире, чем 1, поэтому происходит следующее:

Альтернатива, которая позволяет вам настроить интервал и ширину ваших «столбцов». Выберите шрифт с одинаковой шириной для всех символов, чтобы это работало.

const arr = ['ab', 'abc', 'abcdef', 'a']
// Figure out the max length of your string array
let max = 0
arr.forEach(s => {
  if (max < s.length) max = s.length
})

// Set your column with -
const spacing = 3
const dashes = '-'.repeat(max + spacing * 2);
const firstLine = `+${dashes}+`

console.log(firstLine)

for (let i = 0; i < arr.length; i++) {
  const padLeft = Math.floor((max - arr[i].length) / 2)
  const padRight = max - arr[i].length - padLeft
  console.log('|' + ' '.repeat(spacing + padLeft) + arr[i] + ' '.repeat(spacing + padRight) + '|')
}
console.log(firstLine)

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

Обратите внимание, что на втором изображении в ОП (исходном сообщении) каждая строка находится в своей собственной «ячейке» в своей собственной «строке», в то время как первое изображение в ОП показывает 2 строки в своей собственной «ячейке» в каждой «строке». . Мой ответ совпадает с первым, поскольку код в OP тоже.

  • Определить общее количество символов самой длинной строки в массиве и разделить его на 2.

    // Define >max< outside of loop 
    let max = 0;
    // Compare and redefine >max< within loop
    if (max < (input.length / 2)) max = input.length / 2
    
  • Определите border вне цикла, который должен содержать самую длинную строку в массиве плюс 5 пробелов с обеих сторон.

    const border = `+${"-".repeat(max + 5)}+${"-".repeat(max + 5)}+ \n`;
    
  • Определите space внутри цикла, чтобы значение изменялось в соответствии с текущей отображаемой строкой.

    let space = (max - (arr[i].length / 2)) + 5;
    
  • Определите offset для строк четной длины

    /* If the remainder of the string length divided by 2 is 0, then >offset< is 1 
    else it's 0 */
    let offset = arr[i].length % 2 === 0 ? 1 : 0;
    
  • Наконец, интерполируйте каждую строку в цикле.

    `${border}|${" ".repeat(space)}${arr[i]}${" ".repeat(space + offset)}|`
    

Пример

let arr = [];
let max = 0;

for (let i = 0; i >= 0; i++) {
  let input = prompt('Enter any value (enter "end" to complete the operation) ');
  if (input === 'end') break;
  arr[i] = input;
  if (max < input.length / 2) max = input.length / 2;
}

console.log(arr)

const border = `+${"-".repeat(max + 5)}+${"-".repeat(max + 5)}+ \n`;

for (let i = 0; i < arr.length; i++) {
  let space = (max - (arr[i].length / 2)) + 5;
  let offset = arr[i].length % 2 === 0 ? 1 : 0;
  console.log(`${border}|${" ".repeat(space)}${arr[i]}${" ".repeat(space + offset)}|`);
}

console.log(border);

Другие вопросы по теме