简单好用，这个工具厉害了。

Posted 2022-02-20 微笑很纯洁

大家好，我是开源圈。

今天给大家分享的是一款开源汉字拼音转换工具。

背景

在以往啊，一般的拼音转换都是在后端实现。

比如引入 pinyin4j:

• maven依赖

<dependency>
   <groupId>com.belerweb</groupId>
   <artifactId>pinyin4j</artifactId>
   <version>2.5.1</version>
</dependency>

• 实例

public class Client 

  public static void main(String[] args) throws BadHanyuPinyinOutputFormatCombination 
    HanyuPinyinOutputFormat format = new HanyuPinyinOutputFormat();
    //拼音小写
    format.setCaseType(HanyuPinyinCaseType.LOWERCASE);
    //不带声调
    format.setToneType(HanyuPinyinToneType.WITHOUT_TONE);
    //要转换的中文，格式，转换之后的拼音的分隔符，遇到不能转换的是否保留   wo,shi,zhong,guo,ren,，hello
    System.out.println(PinyinHelper.toHanYuPinyinString("我是中国人，hello", format, ",", true));
  

• 输出结果为

wo,shi,zhong,guo,ren,，hello

或者带音调使用 jpinyin:

• maven依赖

<dependency>
   <groupId>com.github.stuxuhai</groupId>
   <artifactId>jpinyin</artifactId>
   <version>1.1.8</version>
</dependency>

• 实例

import com.github.stuxuhai.jpinyin.PinyinException;
import com.github.stuxuhai.jpinyin.PinyinFormat;
import com.github.stuxuhai.jpinyin.PinyinHelper;

/**
 * @version 1.0
 * @author：xasnow
 * @date：2022-02-08
 */

public class HanyuDemo 
    public static void main(String[] args) throws PinyinException 
        //要转换的中文，转换之后的拼音分隔符，拼音格式带声调  wǒshìzhōngguórén，hello
        System.out.println(
                PinyinHelper.convertToPinyinString("我是中国人，hello", "", PinyinFormat.WITH_TONE_MARK));
    

• 输出：

wǒshìzhōngguórén，hello

那么，在不依赖后端的情况下，我们前端能不能也进行拼音转换呢？

当然可以！

今天呢，给大家推荐一款在前端可以进行拼音转换的方式的组件。

它就是---pinyin-pro。

介绍

特色功能

• 获取汉字、词语、句子等多种格式的拼音

• 获取声母

• 获取韵母

• 获取拼音首字母

• 获取音调

• 获取多音字的多种拼音

• 支持人名姓氏模式

• 支持自定义拼音

• 支持字符串和数组两种输出形式

• 支持拼音文本匹配功能

安装

npm 安装

npm install pinyin-pro

yarn 安装

yarn add pinyin-pro

引入

浏览器 script 引入:

<!--引入某个版本，如3.5.0版本-->
<!-- <script src="https://cdn.jsdelivr.net/gh/zh-lx/pinyin-pro@3.5.0/dist/pinyin-pro.js"></script> -->
<!--引入最新版本-->
<script src="https://cdn.jsdelivr.net/gh/zh-lx/pinyin-pro@latest/dist/pinyin-pro.js"></script>
<script>
  var  pinyin  = pinyinPro;
  pinyin('汉语拼音'); // 'hàn yǔ pīn yīn'
</script>

commonjs 浏览器引入：

import  pinyin  from 'pinyin-pro';
pinyin('汉语拼音'); // 'hàn yǔ pīn yīn'

commonjs node 引入：

const  pinyin  = require('pinyin-pro');
pinyin('汉语拼音'); // 'hàn yǔ pīn yīn'

esm 引入：

import('pinyin-pro').then((exports) => 
  exports.pinyin('汉语拼音'); // 'hàn yǔ pīn yīn'
);

使用示例

获取拼音

import  pinyin  from 'pinyin-pro';

// 获取带音调拼音
pinyin('汉语拼音'); // 'hàn yǔ pīn yīn'
// 获取不带声调的拼音
pinyin('汉语拼音',  toneType: 'none' ); // 'han yu pin yin'
// 获取声调转换为数字后缀的拼音
pinyin('汉语拼音',  toneType: 'num' ); // 'han4 yu3 pin1 yin1'
// 获取数组形式带音调拼音
pinyin('汉语拼音',  type: 'array' ); // ["hàn", "yǔ", "pīn", "yīn"]
// 获取数组形式不带声调的拼音
pinyin('汉语拼音',  toneType: 'none', type: 'array' ); // ["han", "yu", "pin", "yin"]
// 获取数组形式声调转换为数字后缀的拼音
pinyin('汉语拼音',  toneType: 'num', type: 'array' ); // ["han4", "yu3", "pin1", "yin1"]
获取声母
import  pinyin  from 'pinyin-pro';

// 获取声母

pinyin('汉语拼音',  pattern: 'initial' ); // 'h y p y'

// 获取数组形式声母

pinyin('汉语拼音',  pattern: 'initial', type: 'array' ); // ["h", "y", "p", "y"]

获取韵母

import  pinyin  from 'pinyin-pro';

// 获取带音调韵母
pinyin('汉语拼音',  pattern: 'final' ); // 'àn ǔ īn īn'
// 获取不带音调韵母
pinyin('汉语拼音',  pattern: 'final', toneType: 'none' ); // 'an u in in'
// 获取音调为数字的韵母
pinyin('汉语拼音',  pattern: 'final', toneType: 'num' ); // 'an4 u3 in1 in1'
// 获取数组形式带音调韵母
pinyin('汉语拼音',  pattern: 'final', type: 'array' ); // ["àn", "ǔ", "īn", "īn"]
// 获取数组形式不带音调韵母
pinyin('汉语拼音',  pattern: 'final', toneType: 'none', type: 'array' ); // ["an", "u", "in", "in"]
// 获取数组形式音调为数字的韵母
pinyin('汉语拼音',  pattern: 'final', toneType: 'num', type: 'array' ); // ['an4', 'u3', 'in1', 'in1']

里面还支持其他拼音的API。

以后在前端也可以处理汉语拼音转换啦。

获取方式

感兴趣的同学公众号后台回复【拼音】获取项目源码地址。

伙伴们好，我是开源圈，日常给大家分享一些开源圈比较有趣的工具、项目和资讯。在忙于工作的同时，也帮助大家了解开源圈发生的一些热点事情。欢迎大家关注。

大家的点赞、评论和收藏，对作者有非常大鼓励。如文章对你有帮助还请转发支持下，谢谢