我这个工具人，这个工具厉害了

导读大家好，我是开源圈。今天给大家分享的是一款开源汉字拼音转换工具。背景在以往啊，一般的拼音转换都是在后端实现。比如引入pinyin4j:maven依赖<dep....

大家好，我是开源圈。

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

背景

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

比如引入 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,，helloSystem.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，helloSystem.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="http://img.studyofnet.comhttps://cdn.jsdelivr.net/gh/zh-lx/pinyin-pro@3.5.0/dist/pinyin-pro.js"></script> --><!--引入最新版本--><script src="http://img.studyofnet.comhttps://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。

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

获取方式

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

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