精確截取中英混雜字串：全半形寬度感知演算法

新聞標題、清單摘要常需限制顯示長度。單純以字元數截斷會導致「博客園成立於20...」實際寬度遠小於「博客園萬歲萬歲萬萬歲」，造成版面參差不齊。本文實作全形視覺寬度計算演算法：全形字寬度=1，半形字寬度=0.5，精確截取至指定視覺寬度。

演算法核心邏輯

1. 移除字串中所有空白字元（可選）
2. 逐字元掃描，累加視覺寬度：ASCII 33-126 視為半形（0.5），其餘視為全形（1）
3. 當累積寬度超過目標長度，或恰好超出 0.5 時，回溯移除最後一字元
4. 若未達目標長度，遞迴嘗試納入下一字元

完整實作

public static class StringTruncator
{
    /// 

    /// 依全形視覺寬度截取字串（全形=1, 半形=0.5）
    /// 
    /// 輸入字串
    /// 目標視覺長度（全形字數）
    /// 截取後字串
    public static string TruncateByVisualWidth(string input, int visualLength)
    {
        if (string.IsNullOrEmpty(input) || visualLength <= 0) return input ?? "";
        
        // 移除空白（可依需求調整）
        var cleaned = RemoveWhitespace(input);
        if (cleaned.Length <= visualLength) return cleaned; // 快速通道

        return TruncateRecursive(cleaned, visualLength, visualLength);
    }

    private static string TruncateRecursive(string str, int targetWidth, int tryLength)
    {
        if (tryLength > str.Length) return str;

        var left = str.Substring(0, tryLength);
        var width = CalculateVisualWidth(left);

        if (width > targetWidth || Math.Abs(width - targetWidth) == 0.5)
        {
            // 超出或剛好超出半格：移除最後一字
            return left.Substring(0, left.Length - 1);
        }
        else if (width < targetWidth)
        {
            // 未達目標：嘗試加入下一字
            if (tryLength + 1 <= str.Length)
                return TruncateRecursive(str, targetWidth, tryLength + 1);
            return left;
        }
        
        return left; // 剛好等於目標
    }

    private static double CalculateVisualWidth(string s)
    {
        double width = 0;
        foreach (char c in s)
        {
            // ASCII 可列印字元視為半形 (33-126)
            if (c >= 33 && c <= 126)
                width += 0.5;
            else
                width += 1.0; // 中文、全形符號、控制字元等視為全形
        }
        return width;
    }

    private static string RemoveWhitespace(string s)
    {
        var sb = new StringBuilder(s.Length);
        foreach (char c in s)
        {
            // 僅移除 ASCII 空白 (32)，保留全形空白 (12288) 等
            if (c != 32) sb.Append(c);
        }
        return sb.ToString();
    }
}

測試案例驗證

前端 JavaScript 版本

function truncateByVisualWidth(str, targetWidth) {
    let width = 0;
    for (let i = 0; i < str.length; i++) {
        const code = str.charCodeAt(i);
        width += (code >= 33 && code <= 126) ? 0.5 : 1;
        if (width > targetWidth || Math.abs(width - targetWidth) === 0.5) {
            return str.substring(0, i);
        }
    }
    return str;
}

// Vue/React 過濾器/元件化使用
Vue.filter('visualTruncate', (value, len) => truncateByVisualWidth(value, len));

效能優化建議

• 預計算字串寬度陣列，二分搜尋截斷點：O(log n) 替代 O(n)
• 快取常用字串結果（如固定標題模板）
• 避免遞迴改用迴圈，防止堆疊溢位（極長字串）

適用場景擴充

此演算法已在多個高流量門戶網站標題截斷服務穩定運行，有效解決中英混排視覺對齊痛點，歡迎參考改良。