本文简介
点赞 + 关注 + 收藏 = 学会了
这次要推荐一个在前端就能实现汉字转拼音的工具库 ——pinyin-pro。
这个库不止能把中文转成拼音输出，还有拼音匹配、获取声母、获取韵母、获取拼音首字母等功能。
而且还是中文文档啦这不是废话吗？
先看看效果~
pinyin-pro
pinyin-pro包含了和拼音相关的大部分转换功能。
官方文档也写得很好，案例也很全。这里我就不在重复官方文档上面的案例了。
但有时候可能打开github有点困难，所以本文把官方文档的参数部分搬过来。
特色功能
- 获取汉字、词语、句子等多种格式的拼音
- 获取声母
- 获取韵母
- 获取拼音首字母
- 获取音调
- 获取多音字的多种拼音
- 支持人名姓氏模式
- 支持自定义拼音
- 支持字符串和数组两种输出形式
- 支持拼音文本匹配功能
安装
npm install pinyin-pro # 或 yarn add pinyin-pro引入
浏览器script引入:
<!-- 引入某个版本，如3.5.0版本 --> <script src="https://cdn.jsdelivr.net/gh/zh-lx/pinyin-pro@3.5.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 node引入：
const { pinyin } = require('pinyin-pro') pinyin('汉语拼音') // 'hàn yǔ pīn yīn'动态导入：
import('pinyin-pro').then((exports) => { exports.pinyin('汉语拼音') // 'hàn yǔ pīn yīn' })参数
pinyin(word, options)接收两个参数
- **word：**必填。String 类型，需要转化为拼音的中文
- **options：**可选。Object 类型，用于配置各种输出形式，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 |
| removeNonZh | 是否输入字符串中将非汉字的字符过滤掉 | boolean | true / false | false |
| nonZh | 定义非汉字字符的输出形式 | string | spaced / consecutive / removed | spaced |
| v | 是否将拼音 ü 替换为 v | boolean | true / false | false |
以上就是pinyin-pro的安装、引入和参数，更多使用案例可以查看官方文档。
实时输出拼音
简单介绍完pinyin-pro后，我还想介绍几个HTML标签：<ruby>、<rp>、<rt>。
<ruby>标签可以做注释，很适合给汉字做注音。
<ruby>元素由一个或多个需要解释/发音的字符和一个提供该信息的<rt>元素组成，还包括可选的<rp>元素，定义当浏览器不支持 “ruby” 元素时显示的内容。
在支持ruby的浏览器是这样显示的：
<ruby>雷猴<rp>(</rp><rt>leihou</rt><rp>)</rp></ruby>不支持ruby的浏览器的显示效果：
需要注意的是，注解要写在正文内容后面。
了解了pinyin-pro和<ruby>的用法，我们尝试一下完成文章开头的那个效果。
<p><ruby><spanid="text"></span><rp>(</rp><rtid="phoneticize"></rt><rp>)</rp></ruby></p><inputtype="text"id="inp"oninput="transition(this)"><scriptsrc="https://cdn.jsdelivr.net/gh/zh-lx/pinyin-pro@latest/dist/pinyin-pro.js"></script><script>const{pinyin}=pinyinProconsttext=document.getElementById('text')constphoneticize=document.getElementById('phoneticize')// 防抖处理lettimer=nullfunctiontransition(e){timer&&clearTimeout(timer)// 防抖处理timer=setTimeout(function(){letres=pinyin(e.value)// 汉字转拼音text.innerText=e.value// 在页面上展示输入的文本phoneticize.innerText=res// 在文本上面展示拼音},200)}</script>把代码放到本地运行一下吧~
前端用pinyin-pro能高效实现汉字转拼音等功能，落地时要考虑组件复用、快速部署的工程效率问题。试试RollCode 低代码平台，轻松搞定私有化部署、自定义组件、静态页面发布（SSG + SEO）需求。
点赞 + 关注 + 收藏 = 学会了
