一般实现汉字转拼音的功能都是请求服务端 api 实现,而对于一些比较简单的需求,我们可以通过一个 npm 工具包 —— pinyin-pro ,纯前端实现中文汉字转拼音的功能。
当前版本: 3.3.1 -> 3.4.0
点击查看 版本更新文档
npm 安装
npm install pinyin-pro
yarn 安装
yarn add pinyin-pro
浏览器 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>
ESModule 引入:
import {
pinyin } from 'pinyin-pro'; pinyin('汉语拼音'); // 'hàn yǔ pīn yīn'
commonjs 引入:
const {
pinyin } = require('pinyin-pro'); pinyin('汉语拼音'); // 'hàn yǔ pīn yīn'
pinyin(word, options)
接收两个参数
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
pattern | 输出的结果的信息(拼音 / 声母 / 韵母 / 音调 / 首字母) | string | pinyin / initial / final / num / first | pinyin |
toneType | 音调输出形式(拼音符号 / 数字 / 不加音调) | string | symbol / num / none | symbol |
type | 输出结果类型(字符串/数组) | string | string / array | string |
multiple | 输出多音字全部拼音(仅在 word 为长度为 1 的汉字字符串时生效) | boolean | true / false | false |
mode | 拼音查找的模式(常规模式 / 姓氏模式) | string | normal / surname | normal |
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']
import {
pinyin } from 'pinyin-pro'; // 获取音调 pinyin('汉语拼音', {
pattern: 'num' }); // '4 3 1 1' // 获取数组形式音调 pinyin('汉语拼音', {
pattern: 'num', type: 'array' }); // ["4", "3", "1", "1"]
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']
只有单字可以获取到多音模式, 词语、句子无效。同样可以通过配置 options 选项获取数组形式、韵母等格式
import {
pinyin } from 'pinyin-pro'; // 获取多音 pinyin('好', {
multiple: true }); // 'hǎo hào' // 获取数组形式多音 pinyin('好', {
multiple: true, type: 'array' }); // ["hǎo", "hào"]
通过设置 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'
包内部导出了 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'