在前端開發中，開發者通常會使用 localeCompare 來進行中文字符的排序比較。但 localeCompare 還有一種較為少見的應用場景 —— 通過獲取中文字符的拼音首字母來實現檢索功能。本文將詳細介紹這一實用技巧及其應用。

原理

localeCompare 方法允許字符串按特定語言環境的排序規則進行比較。在中文環境下，它會默認按照漢字的拼音順序進行排序。基於這一特性：

1. 準備一組具有代表性的漢字作為基準點（每個字代表一個拼音首字母的起始位置）
2. 將目標漢字與這些基準字進行 localeCompare 比較
3. 根據比較結果確定目標漢字的拼音首字母範圍

這種方法無需依賴第三方拼音庫，實現簡單且輕量，適合大多數基礎場景。

應用場景

獲取漢字拼音首字母在中文應用開發中有廣泛的應用場景：

• 聯繫人列表排序：按拼音首字母對聯繫人進行分組排序
• 城市選擇器：按首字母索引快速定位城市
• 拼音搜索：將拼音首字母存儲到數據庫中，用户輸入拼音首字母即可檢索相關內容
• 數據分類展示：將中文數據按拼音首字母進行分類展示

核心代碼

下面是獲取漢字拼音首字母的核心函數實現：

/**
 * 獲取漢字的拼音首字母
 * @param chineseChar 中文字符串，若傳入多字符則只取第一個字符
 * @param useUpperCase 是否返回大寫字母，默認為false（小寫）
 * @returns 拼音首字母，若無法識別則返回空字符串
 */
export const getTheFirstLetterForPinyin = (chineseChar: string = '', useUpperCase: boolean = false): string => {
    // 兼容性檢查：確保瀏覽器支持 localeCompare 方法
    if (!String.prototype.localeCompare) {
        return '';
    }

    // 參數驗證：確保輸入為有效字符串
    if (typeof chineseChar !== 'string' || !chineseChar.length) {
        return '';
    }

    // 準備用於比較的字母表和基準漢字
    // 注：這些基準漢字分別對應A、B、C...等拼音首字母的起始位置
    const letters = 'ABCDEFGHJKLMNOPQRSTWXYZ'.split('');
    const zh = '阿八嚓噠妸發旮哈譏咔垃痳拏噢妑七呥扨它穵夕丫帀'.split('');

    let firstLetter = '';
    const firstChar = chineseChar[0];

    // 處理字母和數字：直接返回原字符
    if (/^\w/.test(firstChar)) {
        firstLetter = firstChar;
    } else {
        // 處理漢字：通過比較確定拼音首字母範圍
        letters.some((item, index) => {
            // 檢查當前字符是否在當前基準漢字與下一個基準漢字之間
            if (firstChar.localeCompare(zh[index]) >= 0 && 
                (index === letters.length - 1 || firstChar.localeCompare(zh[index + 1]) < 0)) {
                firstLetter = item;
                return true;
            }
            return false;
        });
    }

    // 根據參數決定返回大寫還是小寫字母
    return useUpperCase ? firstLetter.toUpperCase() : firstLetter.toLowerCase();
}

實用示例

獲取單個漢字的拼音首字母

// 獲取單個漢字的拼音首字母
getTheFirstLetterForPinyin('你'); // => 'n'
getTheFirstLetterForPinyin('好', true); // => 'H'
getTheFirstLetterForPinyin('123'); // => '1'
getTheFirstLetterForPinyin(''); // => ''

獲取字符串的拼音首字母縮寫

/**
 * 獲取整個字符串的拼音首字母縮寫
 * @param str 輸入字符串
 * @returns 拼音首字母縮寫
 */
function getPinyinInitials(str: string): string {
    return str.split('')
        .map(char => getTheFirstLetterForPinyin(char))
        .join('');
}

getPinyinInitials('你好世界'); // => 'nhsj'
getPinyinInitials('JavaScript中文教程'); // => 'javascriptzwjc'
getPinyinInitials('加油123'); // => 'jy123'

聯繫人列表按首字母分組

// 將聯繫人列表按拼音首字母分組
function groupContactsByInitial(contacts: {name: string}[]): Record<string, {name: string}[]> {
    const groups: Record<string, {name: string}[]> = {};
    
    // 按首字母分組
    contacts.forEach(contact => {
        const initial = getTheFirstLetterForPinyin(contact.name, true);
        if (!groups[initial]) {
            groups[initial] = [];
        }
        groups[initial].push(contact);
    });
    
    return groups;
}

const contacts = [
    {name: '張三'},
    {name: '李四'},
    {name: '王五'},
    {name: '趙六'}
];

// 按首字母分組
const groupedContacts = groupContactsByInitial(contacts);

// 還可以進一步通過 localeCompare 實現組內排序，此處暫時不做操作
/*
結果：
{
    'L': [{name: '李四'}],
    'W': [{name: '王五'}],
    'Z': [{name: '張三'}, {name: '趙六'}]
}
*/

侷限性與替代方案

localeCompare 方法在現代瀏覽器中得到廣泛支持（除了 IE11 前的版本不可用之外，其餘瀏覽器均完全支持）。

侷限性

1. 多音字問題：該方法無法處理多音字情況，例如"音樂"會被識別為"yl"而非"yy"
2. 準確性限制：對於一些生僻字，可能無法準確識別其拼音首字母
3. 依賴瀏覽器實現：不同瀏覽器的 localeCompare 實現可能略有差異

替代方案

如果需要更強大的拼音處理功能，可以考慮使用以下第三方庫：

• pinyin-pro：支持多音字識別、音調標註等高級功能
• pinyinjs：輕量級的拼音轉換庫

通過 localeCompare API，可以在不依賴第三方庫的情況下，快速實現中文拼音首字母的獲取功能，為您的應用添加更加友好的中文處理能力。