这篇文章给大家分享的是用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设计模式有很多种类型，命令模式是JavaScript设计模式中行为型的一种设计模式，下面有详细的介绍和实例，对新手学习和理解JavaScript设计模式有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章能有所收获。

• 可维护JS代码具有哪些特点，怎么写才规范

  在平时工作开发中，大部分开发人员都花费大量的时间在维护其他人员的代码。很难从头开始开发新代码，很多情况下都是以他人成果为基础的，或者新增修改需求，自己写的代码也会被其他开发人员调用，所以写好一份高质量可维护的代码就显得十分重要。

• 隐藏域的作用是什么，怎样获取隐藏域中的值？

  这篇文章给大家分享的是隐藏域的作用和获取隐藏域中的值的方法，文中的获取隐藏域中的值的示例是使用jQuery实现的，下文有详细的介绍，有需要的朋友可以参考，接下来就跟随小编来一起学习一下吧！

• package.json文件有什么用？package.json中字段怎样理解？

  package.json文件有什么用？接触前端的朋友应该常常能看到package.json文件，本文我们就来详细的了解一下package.json文件的用户，及package.json文件的各种字段，接下来我们一起学习一下吧。

• 如何做JavaScript代码优化，操作是什么

  本篇文章给大家带来了关于javascript的相关知识，主要介绍了总结分享10个JavaScript代码优化小tips，文章围绕主题展开详细的内容介绍，具有一定的参考价值，希望对大家有帮助。