这篇文章给大家分享的是用JS实现中文转拼音的功能，其实实现并不困难，因为拼音比较多会有一点繁琐，下文有实现代码，感兴趣的朋友可以做个参考，接下来一起跟随小编看看吧。

    安装

    npm 安装

npm install pinyin-pro

    yarn 安装

yarn add pinyin-pro

    引入

    浏览器 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) 接收两个参数

    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

    使用示例

    获取拼音

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"]

    总结

    以上就是关于js实现中文转拼音的方法介绍，有需要的朋友可以参考上述代码，希望对大家学习JavaScript有帮助，想要了解更多请搜索群英网络以前的文章或继续浏览其他相关的文章。

文本转载自脚本之家

相关阅读：

用JS怎样实现间隔10秒载获取验证码的功能？
用JS怎么写个画板功能？
js闭包的使用场景有哪些，你知道几个？
JavaScript中循环方法有哪些，你知道几个？
js怎样实现分解数字？教你三个办法
js碰撞效果怎样实现?js碰撞测试代码详解

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• JavaScript排他思想怎样理解，实现方法是什么

  排他思想的算法就是排除掉其他的，本文主要介绍了JavaScript 排他思想的实现，以及介绍了两个示例，感兴趣的可以了解一下

• axios怎么取消请求和避免重复请求？

  axios怎么取消请求和避免重复请求？在实际的应用中，在项目的一些场景会有连续发送多个请求的情况，而异步会导致最后得到的是我们不想要的结果，这对于性能的影响是很大的，因此了解axios怎么取消请求和避免重复请求还是很有必要的，下面我们就来具体了解看看。

• vue项目中实现大文件分片上传要做什么，步骤是怎样

  本文主要介绍了vue 大文件分片上传，主要包括断点续传、并发上传、秒传，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• Vue前端进行打包的具体操作过程是什么

  这篇文章主要介绍了Vue前端打包的详细流程,下面文章围绕Vue前端打包的相关资料展开详细内容,需要的小伙伴可以参考一下，希望对大家有所帮助

• JavaScript冒泡排序怎样实现？一文带你看懂原理

  这篇文章给大家分享的是JavaScript冒泡排序的相关内容，很多朋友对于JavaScript冒泡排序不是很理解，对此这篇给大家讲讲JavaScript冒泡排序的实现及实现原因，对大家学习冒泡排序有一定的参考价值，有需要的朋友可以了解看看，接下来就跟随小编一起学习一下吧。