如何用JavaScript通过循环实现五角星（★）图案打印

作为JavaScript新手，打印三角形这类图案相对容易，但五角星（★）的绘制难度更高。以下是我能实现的三角形图案代码，现在需要用循环语句完成完整的五角星（★）图案：

let n = 5;
let string = "";
for (let i = 1; i <= n; i++) {
  for (let j = 0; j < i; j++) {
    string += "*";
  }
  string += "\n";
}
console.log(string);

五角星图案实现方案 #

下面是用嵌套循环实现字符版五角星的代码，逻辑简单易懂，适合新手理解：

const star = "★";
let pattern = "";

// 绘制五角星上半部分（3行）
for (let i = 0; i < 3; i++) {
  // 添加前置空格
  for (let j = 0; j < 2 - i; j++) {
    pattern += " ";
  }
  // 添加星星
  for (let k = 0; k < 2 * i + 1; k++) {
    pattern += star;
  }
  pattern += "\n";
}

// 绘制五角星下半部分（2行）
for (let i = 1; i < 3; i++) {
  // 添加前置空格
  for (let j = 0; j < i; j++) {
    pattern += " ";
  }
  // 添加星星
  for (let k = 0; k < 5 - 2 * i; k++) {
    pattern += star;
  }
  pattern += "\n";
}

console.log(pattern);

代码说明 #

这个方案把五角星拆分为上下两部分绘制：

• 上半部分3行：每行前置空格数从2递减到0，星星数量从1递增到5
• 下半部分2行：每行前置空格数从1递增到2，星星数量从3递减到1
  最终组合出对称的五角星形状。

内容的提问来源于stack exchange，提问作者Kamal