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);

完