JSP 實現倒置金字塔圖案輸出：邏輯解析與程式碼實戰

在 JSP 頁面中利用巢狀迴圈輸出幾何圖案是基礎程式設計訓練的經典題目。本文以「倒置金字塔」（上寬下窄的等腰三角形再加上倒置部分組成菱形/沙漏形）為例，詳細拆解行數、空格、星號的數學關係，提供完整可部署的 JSP 程式碼。

圖案結構與數學規律

目標輸出共 9 行（5 行正向 + 4 行倒向），形成對稱沙漏狀：

    *        第 1 行：4 空格 + 1 星號
   ***       第 2 行：3 空格 + 3 星號
  *****      第 3 行：2 空格 + 5 星號
 *******     第 4 行：1 空格 + 7 星號
*********    第 5 行：0 空格 + 9 星號
 *******     第 6 行：1 空格 + 7 星號
  *****      第 7 行：2 空格 + 5 星號
   ***       第 8 行：3 空格 + 3 星號
    *        第 9 行：4 空格 + 1 星號

上半部（第 1~5 行）規律

• 總行數 total = 5
• 第 i 行（1-based）：空格數 = total - i，星號數 = 2*i - 1

下半部（第 6~9 行）規律

• 對應上半部第 total - 1 到第 1 行
• 第 k 行（1-based，k=1..4）：空格數 = k，星號數 = 2*(total - k) - 1

完整 JSP 實現程式碼

<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <title>倒置金字塔輸出</title>
    <style>
        pre { font-family: 'Courier New', monospace; font-size: 16px; line-height: 1.2; }
    </style>
</head>
<body>
<h3>倒置金字塔 (菱形/沙漏) 輸出</h3>
<pre>
<%
    int totalRows = 5;          // 上半部行數（含中間最寬行）
    StringBuilder sb = new StringBuilder();

    // === 上半部：正向金字塔 ===
    for (int i = 1; i <= totalRows; i++) {
        // 輸出前導空格
        for (int j = 0; j < totalRows - i; j++) {
            sb.append(' ');
        }
        // 輸出星號
        for (int j = 0; j < 2 * i - 1; j++) {
            sb.append('*');
        }
        sb.append("<br>");
    }

    // === 下半部：倒向金字塔 ===
    for (int k = 1; k < totalRows; k++) {
        // 輸出前導空格
        for (int j = 0; j < k; j++) {
            sb.append(' ');
        }
        // 輸出星號
        for (int j = 0; j < 2 * (totalRows - k) - 1; j++) {
            sb.append('*');
        }
        sb.append("<br>");
    }
%>
<%= sb.toString() %>
</pre>
</body>
</html>

關鍵技術點解析

1. StringBuilder 高效拼接：避免字串不可變特性導致大量臨時物件，效能遠優於 str +=。
2. HTML 空白處理：瀏覽器會合併多個空格，因此需在 <pre> 標籤中輸出，或將空格替換為  。範例採用 <pre> 保持等寬字體對齊。
3. 換行處理：JSP 輸出到 HTML 需用 <br>，而非 \n。
4. 邏輯與視圖分離建議：實際專案建議將圖案生成邏輯移至 JavaBean/Service，JSP 僅負責渲染，遵循 MVC 原則。

擴展：通用化菱形生成工具類

public class DiamondPrinter {
    public static String generate(int maxRadius) {
        StringBuilder sb = new StringBuilder();
        // 上半部含中間行
        for (int i = 1; i <= maxRadius; i++) {
            sb.append(" ".repeat(maxRadius - i));
            sb.append("*".repeat(2 * i - 1));
            sb.append("\n");
        }
        // 下半部
        for (int i = maxRadius - 1; i >= 1; i--) {
            sb.append(" ".repeat(maxRadius - i));
            sb.append("*".repeat(2 * i - 1));
            sb.append("\n");
        }
        return sb.toString();
    }
}
// JSP 中調用：<%= DiamondPrinter.generate(5).replace("\n", "
").replace(" ", " ") %>

Java 11+ 可使用 String.repeat() 進一步簡化迴圈；若需在 HTML 直接顯示，記得將空格轉  、換行轉 <br>。