这篇文章给大家分享的是用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进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• JS数组操作函数包括什么，用法是怎样的

  本篇文章给大家带来了关于JavaScript的相关知识，其中主要整理了数组操作函数的相关问题，包括了元素删除、splice、slice、concat等等内容，下面一起来看一下，希望对大家有帮助。

• 用JavaScript怎样求对数，都有哪些方法？

  这篇文章给大家分享的是用JavaScript怎样求对数的方法，文中给大家分享了四种方法，并不难理解，还有示例供大家参考，有需要的朋友可以看看，对大家学习JavaScript会有一定的帮助，接下来就跟随小编一起学习一下吧。

• 使用原生JS怎样做表格循环滚动的效果？

  今天给大家分享使用原生JS做表格循环滚动的效果，下文的表格循环滚动思路来做轮播图，对轮播图也感兴趣的朋友，不妨了解看看本文的示例，接下来我们一起看看吧。

• React中useRef的用法有什么？怎样实现？

  React中useRef的用法有什么？如果有使用过React的朋友，应该对ref会比较熟悉的点，ref可以用来获取组件实例对象或者是DOM对象，而useRef这个hooks函数，除了传统的用法之外，它还可以“跨渲染周期”保存数据。那么具体怎样用呢？下面我们就一起来了解看看。

• 用Angular如何制作树形二级表格，代码是什么

  这篇文章主要介绍了angular手写树形二级表格的完整代码，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下