javascript 如何在浏览器控制台中正确对齐文本?

wf82jlnq  于 2022-11-20  发布在  Java
关注(0)|答案(3)|浏览(187)

我的任务是从提示符中获取值,并将它们放在图片中,但我真的不明白如何使所有内容处于同一水平,例如,使“|“总是在加号下面,不注意单词的长度。
我的结果:

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]}      |`)
}
yb3bgrhw

yb3bgrhw1#

你可以这样做,但字体有可变的宽度,所以我不希望这工作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宽,因此会发生以下情况:

ldfqzlk8

ldfqzlk82#

让您调整“栏”间距和长度的替代方法。请选择所有字符都有相同长度的字型,这样才能正常运作。

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)
yeotifhr

yeotifhr3#

下面 的 解决 方案 将 在 每个 字符 串 的 每 边 添加 5 个 或 更多 的 空格 , 并 在 长度 相等 的 字符 串 中 添加 额外 的 空格 , 以 确保 垂直 边框 的 间距 均匀 。 只要 字体 是 等宽 字体 ( 这 是 控制 台 默认 设置 ) , 内容 将 完全 对齐 显示 。
注意 , 在 * * OP * * ( * * O * * riginal * * P * * ost ) 的 第 二 个 图像 中 , 每个 字符 串 都 在 它 自己 的 " 行 " 中 的 " 单元 格 " 中 , 而 OP 中 的 第 一 个 图像 显示 了 每个 " 行 " 上 它 自己 的 " 单元 格 " 中 的 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);

格式

相关问题