javascript 纯前端实现汉字转拼音 —— pinyin-pro 库_前端中文转拼音第三方库

一般实现汉字转拼音的功能都是请求服务端 api 实现，而对于一些比较简单的需求，我们可以通过一个 npm 工具包 —— pinyin-pro ，纯前端实现中文汉字转拼音的功能。

特色功能

• 支持汉字、词语、句子多种格式输入获取
• 获取拼音
• 获取声母
• 获取韵母
• 获取拼音首字母
• 获取音调
• 获取多音字的多种拼音
• 支持人名姓氏模式
• 支持自定义拼音
• 支持字符串和数组两种输出形式

版本更新

当前版本： 3.3.1 -> 3.4.0

• 新增功能
  • 支持姓氏模式拼音识别，具体用法见姓氏模式
  • 支持自定义拼音功能，具体用法见自定义拼音
• 问题修复
  修复文本过长时堆栈溢出问题
• 字音校准
  • 褚: ‘zhǔ’ -> ‘chǔ zhǔ’
  • 俞: ‘yù’ -> ‘yú yù’
  • 臧: ‘zàng’ -> ‘zāng’
  • 贲: ‘bì’ -> ‘bēn bì’
  • 莘: ‘xīn’ -> ‘shēn xīn’
  • 郦: ‘zhí’ -> ‘lì zhí’

点击查看 版本更新文档

安装

npm 安装

npm install pinyin-pro
1

yarn 安装

yarn add pinyin-pro
1

引入

浏览器 script 引入:

<!--引入某个版本，如3.3.0版本-->
<!-- <script src="https://cdn.jsdelivr.net/gh/zh-lx/pinyin-pro@3.3.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>
1
2
3
4
5
6
7
8

ESModule 引入：

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

commonjs 引入：

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

参数

pinyin(word, options) 接收两个参数

• word：必填。String 类型，需要转化为拼音的中文
• options：可选。Object 类型，用于配置各种输出形式，options 的键值配置如下：

使用示例

获取拼音

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"]
1
2
3
4
5
6
7
8
9
10
11
12
13
14

获取声母

import { pinyin } from 'pinyin-pro';

// 获取声母
pinyin('汉语拼音', { pattern: 'initial' }); // 'h y p y'
// 获取数组形式声母
pinyin('汉语拼音', { pattern: 'initial', type: 'array' }); // ["h", "y", "p", "y"]
1
2
3
4
5
6

获取韵母

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']
1
2
3
4
5
6
7
8
9
10
11
12
13
14

获取音调

import { pinyin } from 'pinyin-pro';

// 获取音调
pinyin('汉语拼音', { pattern: 'num' }); // '4 3 1 1'
// 获取数组形式音调
pinyin('汉语拼音', { pattern: 'num', type: 'array' }); // ["4", "3", "1", "1"]
1
2
3
4
5
6

获取拼音首字母

import { pinyin } from 'pinyin-pro';

// 获取拼音首字母
pinyin('赵钱孙李额', { pattern: 'first' }); // 'z q s l é'
// 获取不带音调拼音首字母
pinyin('赵钱孙李额', { pattern: 'first', toneType: 'none' }); // 'z q s l e'
// 获取数组形式拼音首字母
pinyin('赵钱孙李额', { pattern: 'first', type: 'array' }); // ['z', 'q', 's', 'l', 'é']
// 获取数组形式不带音调拼音首字母
pinyin('赵钱孙李额', { pattern: 'first', toneType: 'none'， type: 'array' }); // ['z', 'q', 's', 'l', 'e']
1
2
3
4
5
6
7
8
9
10

获取单个字的多音

只有单字可以获取到多音模式, 词语、句子无效。同样可以通过配置 options 选项获取数组形式、韵母等格式

import { pinyin } from 'pinyin-pro';

// 获取多音
pinyin('好', { multiple: true }); // 'hǎo hào'
// 获取数组形式多音
pinyin('好', { multiple: true, type: 'array' }); // ["hǎo", "hào"]
1
2
3
4
5
6

姓氏模式

通过设置 mode: 'surname' 开启姓氏模式后，匹配到百家姓中的姓氏优先输出姓氏拼音

import { pinyin } from 'pinyin-pro';

// 不开启姓氏模式
pinyin('我叫曾小贤'); // 'wǒ jiào céng xiǎo xián'

// 开启姓氏模式
pinyin('我叫曾小贤', { mode: 'surname' }); // 'wǒ jiào zēng xiǎo xián'
1
2
3
4
5
6
7

自定义拼音

包内部导出了 customPinyin 方法，支持用户自定义设置词句拼音，当中文中匹配用户自己定义的词句拼音时，优先使用用户自定义的词句拼音

import { pinyin, customPinyin } from 'pinyin-pro';

customPinyin({
  干一行行一行: 'gàn yī háng xíng yī háng',
});
pinyin('干一行行一行'); // 'gàn yī háng xíng yī háng'
1
2
3
4
5
6