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

Вы можете сделать что-то подобное, но шрифты имеют переменную ширину, поэтому я не ожидаю, что это сработает на 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);