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

大家好，我是开源圈。

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

背景

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

比如引入 pinyin4j:

maven依赖


com.belerweb
pinyin4j
2.5.1

实例

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依赖


com.github.stuxuhai
jpinyin
1.1.8

实例

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 引入:

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。

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