js如何將漢字轉化為拼音

github地址，上面有封裝好的轉換工具：https://github.com/sxei/pinyinjs

里面有幾個庫，根據功能，庫的文件大小也不一樣，可以根據需求去引入使用。

里面封裝好了方法：

/**
 * 獲取漢字的拼音首字母
 * @param str 漢字字符串，如果遇到非漢字則原樣返回
 * @param polyphone 是否支持多音字，默認false，如果為true，會返回所有可能的組合數組
 */
pinyinUtil.getFirstLetter(str, polyphone);
/**
 * 根據漢字獲取拼音，如果不是漢字直接返回原字符
 * @param str 要轉換的漢字
 * @param splitter 分隔字符，默認用空格分隔
 * @param withtone 返回結果是否包含聲調，默認是
 * @param polyphone 是否支持多音字，默認否
*/
pinyinUtil.getPinyin(str, splitter, withtone, polyphone);
/**
 * 拼音轉漢字，只支持單個漢字，返回所有匹配的漢字組合
 * @param pinyin 單個漢字的拼音，不能包含聲調
 */
pinyinUtil.getHanzi(pinyin)；

下面分別針對不同場合如何使用作介紹。

如果你只需要獲取拼音首字母

<script type="text/javascript" src="pinyin_dict_firstletter.js"></script>
<script type="text/javascript" src="pinyinUtil.js"></script>

<script type="text/javascript">
pinyinUtil.getFirstLetter('小茗同學'); // 輸出 XMTX
pinyinUtil.getFirstLetter('大中國', true); // 輸出 ['DZG', 'TZG']
</script>

需要特別說明的是，如果你引入的是其它2個字典文件，也同樣可以獲取拼音首字母的，只是說用這個字典文件更適合。

如果拼音不需要聲調

<script type="text/javascript" src="pinyin_dict_notone.js"></script>
<script type="text/javascript" src="pinyinUtil.js"></script>

<script type="text/javascript">
pinyinUtil.getPinyin('小茗同學'); // 輸出 'xiao ming tong xue'
pinyinUtil.getHanzi('ming'); // 輸出 '明名命鳴銘冥茗溟酩瞑螟暝'
</script>

如果需要聲調或者需要處理生僻字

<script type="text/javascript" src="pinyin_dict_withtone.js"></script>
<script type="text/javascript" src="pinyinUtil.js"></script>

<script type="text/javascript">
pinyinUtil.getPinyin('小茗同學'); // 輸出 'xiǎo míng tóng xué'
pinyinUtil.getPinyin('小茗同學', '-', true, true); // 輸出 ['xiǎo-míng-tóng-xué', 'xiǎo-míng-tòng-xué']
</script>

如果需要精准識別多音字

由於詞典文件較大，本示例不推薦在web環境下使用：

<script type="text/javascript" src="dict/pinyin_dict_withtone.js"></script>
<script type="text/javascript" src="dict/pinyin_dict_polyphone.js"></script>
<script type="text/javascript" src="pinyinUtil.js"></script>

<script type="text/javascript">
pinyinUtil.getPinyin('長城和長大', ' ', true, true)； // 輸出：cháng chéng hé zhǎng dà
pinyinUtil.getPinyin('喝水和喝彩', ' ', true, true)； // 輸出：hē shuǐ hé hè cǎi
pinyinUtil.getPinyin('偉大的大夫', ' ', true, true)； // 輸出：wěi dà de dài fū
</script>

關於簡單拼音輸入法

一個正式的輸入法需要考慮的東西太多太多，比如詞庫、用戶個人輸入習慣等，這里只是實現一個最簡單的輸入法，沒有任何詞庫（雖然加上也可以，但是web環境不適合引入太大的文件）。

推薦使用第二個字典文件pinyin_dict_noletter.js，雖然字典三字數更多，但是不能按照漢字使用頻率排序，一些生僻字反而在前面。

<link rel="stylesheet" type="text/css" href="simple-input-method/simple-input-method.css">
<input type="text" class="test-input-method"/>
<script type="text/javascript" src="pinyin_dict_noletter.js"></script>
<script type="text/javascript" src="pinyinUtil.js"></script>
<script type="text/javascript" src="simple-input-method/simple-input-method.js"></script>
<script type="text/javascript">
    SimpleInputMethod.init('.test-input-method');
</script>

 

 ----------------------------

以下是做了個小實驗，加入有一個人名數組，可能有漢語名稱，也可能有英文名稱，

想把這個人名數組按照，首字母順序排序，並且將首字母相同的放在以26個小寫英語字母命名的數組中，最后合並在一個大數組中：

    var arr=["暗暗","馮大大","巴巴","妹妹","中國","tom","bob","alis","A","安安"];
    var changeArr=[];
    arr.forEach(item=>{
        var obj={name:"",pinyin:""};
        obj.name=item;
        obj.pinyin=pinyinUtil.getFirstLetter(item);
        changeArr.push(obj);
    });
    console.log(changeArr);
    changeArr.sort(function(a,b){
        return a.pinyin.localeCompare(b.pinyin,"zh");
    });

    var splitNameArr=[];
    var a=[],b=[],c=[],d=[],e=[],f=[],g=[],h=[],i=[],j=[],k=[],l=[],m=[],n=[],
        o=[],p=[],q=[],r=[],s=[],t=[],u=[],v=[],w=[],x=[],y=[],z=[];
    changeArr.forEach(item=>{
        var firstPinYin=item.pinyin.charAt(0);
        console.log(firstPinYin);
        switch(firstPinYin){
            case "a": 
            case "A" :
                a.push(item);
                break;
            case "b": 
            case "B" :
                b.push(item);
                break;
            case "c": 
            case "C" :
                c.push(item);
                break;
            case "d":
            case "D" :
                d.push(item);
                break;
            case "e": 
            case "E" :
                e.push(item);
                break;
            case "f":
            case "F" :
                f.push(item);
                break;
            case "g":
            case "G" :
                g.push(item);
                break;
            case "h":
            case "H" :
                h.push(item);
                break;
            case "i":
            case "I" :
                i.push(item);
                break;
            case "j":
            case "G" :
                j.push(item);
                break;
            case "k":
            case "K" :
                k.push(item);
                break;
            case "l":
            case "L" :
                l.push(item);
                break;
            case "m":
            case "M" :
                m.push(item);
                break;
            case "n":
            case "N" :
                n.push(item);
                break;
            case "o":
            case "O" :
                o.push(item);
                break;
            case "p":
            case "P" :
                p.push(item);
                break;
            case "q":
            case "Q" :
                q.push(item);
                break;
            case "r":
            case "R" :
                r.push(item);
                break;
            case "s":
            case "S" :
                s.push(item);
                break;
            case "t":
            case "T" :
                t.push(item);
                break;
            case "u":
            case "U" :
                u.push(item);
                break;
            case "v":
            case "V" :
                v.push(item);
                break;
            case "w":
            case "W" :
                w.push(item);
                break;
            case "x":
            case "X" :
                x.push(item);
                break;
            case "y":
            case "Y" :
                y.push(item);
                break;
            case "z":
            case "Z" :
                z.push(item);
                break;
            default:
                break;
        }
    });
    console.log(a)
    splitNameArr.push(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z);
    console.log(splitNameArr);

完