Node.js 通用边框函数

当我们需要在命令行或控制台中输出一些信息时，通常需要将这些信息进行美化。边框是一种常见的美化方式，它可以使输出内容更加有条理、易读。

在 Node.js 中，我们可以编写一个通用的函数来实现边框功能。接下来，我将为你介绍如何编写这个函数。

函数设计

首先，让我们来设计这个函数的参数和返回值。

参数

我们需要传入以下参数：

• text : 要输出的文本内容字符串。
• options : 配置选项对象，包含以下属性：
  • padding : 边框和内容之间的空白边距，默认为 2。
  • borderStyle : 边框样式，默认为 "single", 可选值为 "single", "double", "round", "classic", "bold", "dot", "curved", "doubleSingle", "doubleRound", "arrow", "tee", "tree"。
  • borderColor : 边框颜色，默认为 "white", 可选值为各种颜色名称或 RGB 颜色。
  • backgroundColor : 背景颜色，默认为 black, 可选值为各种颜色名称或 RGB 颜色。

返回值

该函数将返回一个字符串，表示原始文本内容包含边框的结果。

函数实现

接下来，让我们来实现这个函数。

/**
 * @param {string} text 要输出的文本内容字符串。
 * @param {{ padding?: number, borderStyle?: string, borderColor?: string, backgroundColor?: string }} options 配置选项对象。
 * @returns {string} 包含边框的文本内容字符串。
 */
function drawBox(text, {
  padding = 2,
  borderStyle = "single",
  borderColor = "white",
  backgroundColor = "black"
} = {}) {
  const borders = {
    single: {
      topLeft: "┌",
      top: "─",
      topRight: "┐",
      right: "│",
      bottomRight: "┘",
      bottom: "─",
      bottomLeft: "└",
      left: "│"
    },
    double: {
      topLeft: "╔",
      top: "═",
      topRight: "╗",
      right: "║",
      bottomRight: "╝",
      bottom: "═",
      bottomLeft: "╚",
      left: "║"
    },
    round: {
      topLeft: "╭",
      top: "─",
      topRight: "╮",
      right: "│",
      bottomRight: "╯",
      bottom: "─",
      bottomLeft: "╰",
      left: "│"
    },
    classic: {
      topLeft: "+",
      top: "-",
      topRight: "+",
      right: "|",
      bottomRight: "+",
      bottom: "-",
      bottomLeft: "+",
      left: "|"
    },
    bold: {
      topLeft: "┏",
      top: "━",
      topRight: "┓",
      right: "┃",
      bottomRight: "┛",
      bottom: "━",
      bottomLeft: "┗",
      left: "┃"
    },
    dot: {
      topLeft: "┌",
      top: "┄",
      topRight: "┐",
      right: "┆",
      bottomRight: "┘",
      bottom: "┄",
      bottomLeft: "└",
      left: "┆"
    },
    curved: {
      topLeft: "╭",
      top: "╴",
      topRight: "╮",
      right: "╷",
      bottomRight: "╯",
      bottom: "╶",
      bottomLeft: "╰",
      left: "╷"
    },
    doubleSingle: {
      topLeft: "╓",
      top: "─",
      topRight: "╖",
      right: "║",
      bottomRight: "╜",
      bottom: "─",
      bottomLeft: "╙",
      left: "║"
    },
    doubleRound: {
      topLeft: "╭",
      top: "═",
      topRight: "╮",
      right: "│",
      bottomRight: "╯",
      bottom: "═",
      bottomLeft: "╰",
      left: "│"
    },
    arrow: {
      topLeft: "▶",
      top: "▶",
      topRight: "▶",
      right: "▶",
      bottomRight: "▶",
      bottom: "▶",
      bottomLeft: "▶",
      left: "▶"
    },
    tee: {
      topLeft: "┳",
      top: "━",
      topRight: "┳",
      right: "┃",
      bottomRight: "┻",
      bottom: "━",
      bottomLeft: "┻",
      left: "┃"
    },
    tree: {
      topLeft: "🌴",
      top: "🌴",
      topRight: "🌴",
      right: "🌴",
      bottomRight: "🌴",
      bottom: "🌴",
      bottomLeft: "🌴",
      left: "🌴"
    }
  };
  const border = borders[borderStyle];

  const lines = text.split("\n");
  const contentWidth = Math.max(...lines.map(line => line.length));
  const contentHeight = lines.length;

  const horizontalBorder = border.topLeft + border.top.repeat(contentWidth + padding * 2) + border.topRight;
  const middleBorder = border.left + " ".repeat(contentWidth + padding * 2) + border.right;
  const topPadding = border.left + " ".repeat(padding);
  const bottomPadding = " ".repeat(padding) + border.right;
  const middlePadding = " ".repeat(padding * 2);
  const content = lines.map(line => {
    const prefix = topPadding + line;
    const suffix = " ".repeat(contentWidth - line.length) + bottomPadding;
    return prefix + suffix;
  }).join("\n");

  const horizontalLines = [horizontalBorder, middleBorder.repeat(contentHeight), horizontalBorder];
  const middleLines = Array(padding).fill(middleBorder).join("\n");
  const topPaddingLines = Array(padding + 1).fill(topPadding + middlePadding + bottomPadding).join("\n");
  const bottomPaddingLines = Array(padding + 1).fill(middleBorder).join("\n");

  const result = [horizontalLines, topPaddingLines, content, bottomPaddingLines, horizontalLines].join("\n");
  return result;
}

调用示例

接下来，我们将会展示如何调用这个函数。

console.log(drawBox("Hello, World!"));

输出：

┌──────────────┐
│  Hello,      │
│  World!      │
└──────────────┘

console.log(drawBox("你好，世界！", {
  padding: 1,
  borderStyle: "bold",
  borderColor: "red",
  backgroundColor: "#c0ffee"
}));

输出：

┏━━━━━━━━━━━━━┓
┃             ┃
┃  你好，世界！  ┃
┃             ┃
┗━━━━━━━━━━━━━┛

结语

现在你已经学会了如何编写一个通用的边框函数。在实际项目中，你可以根据需要进一步优化这个函数，并为其添加更多的样式选项。祝你使用愉快！