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

大家好，我是开源圈。

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

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

比如引入 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。

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

获取方式

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

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

,