服务器之家:专注于VPS、云服务器配置技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - 编程技术 - 推荐一款前端汉字转拼音组件工具

推荐一款前端汉字转拼音组件工具

2020-12-03 23:23今日头条程序员柳大侠 编程技术

推荐一个前端的汉字转拼音组件 hotoo/pinyin, 支持在 Node 和 Web 浏览器环境运行。

 推荐一款前端汉字转拼音组件工具

推荐一个前端的汉字转拼音组件 hotoo/pinyin, 支持在 Node 和 Web 浏览器环境运行。

github网址:https://github.com/hotoo/pinyin

推荐一款前端汉字转拼音组件工具

特性

  • 根据词组智能匹配最正确的拼音。
  • 支持多音字。
  • 简单的繁体支持。
  • 支持多种不同拼音风格。

使用步骤

安装依赖

npm install pinyin 

新建一个pinyin.js

var pinyin = require("pinyin"); 

 

console.log(pinyin("中心"));    // [ [ 'zhōng' ], [ 'xīn' ] ] 

 

console.log(pinyin("中心", { 

  heteronym: true               // 启用多音字模式 

}));                            // [ [ 'zhōng''zhòng' ], [ 'xīn' ] ] 

 

console.log(pinyin("中心", { 

  heteronym: true,              // 启用多音字模式 

  segment: true                 // 启用分词,以解决多音字问题。 

}));                            // [ [ 'zhōng' ], [ 'xīn' ] ] 

 

console.log(pinyin("我喜欢你", { 

  segment: true,                // 启用分词 

  grouptrue                   // 启用词组 

}));                            // [ [ 'wǒ' ], [ 'xǐhuān' ], [ 'nǐ' ] ] 

 

console.log(pinyin("中心", { 

  style: pinyin.STYLE_INITIALS, // 设置拼音风格 

  heteronym: true 

}));                            // [ [ 'zh' ], [ 'x' ] ] 

通过pinyin方法,传入汉字和配置参数返回拼音二维数组。配置参数可以传入拼音风格、多音字模式(返回汉字的所有拼音)、分词模式(性能慢)。

拼音风格有以下几种:

pinyin.STYLE_NORMAL         //不带声调,如:pin yin 

pinyin.STYLE_TONE               //默认启用,声调风格,如:pīn yīn 

pinyin.STYLE_FIRST_LETTER  //首字母风格,只返回拼音的首字母部分,如:p y 

pinyin.STYLE_INITIALS          //声母风格,只返回各个拼音的声母部分。对于没有声母的汉字,返回空白字符串,如:中国的拼音 zh g 

pinyin.STYLE_TONE2             //声调风格 2,即拼音声调以数字形式在各个拼音之后,用数字 [0-4] 进行表示.如:pin1 yin1 

pinyin.STYLE_TO3NE             //声调风格 3,即拼音声调以数字形式在注音字符之后,用数字 [0-4] 进行表示。如:pi1n yi1n 

运行示例js

运行js前需要你本地安装Node.js环境,执行命令

node pinyin.js 

推荐一款前端汉字转拼音组件工具

node pinyin.js

返回的是汉字的拼音二维数组

如果你想对汉字进行拼音排序,可以调用compare方法对两组汉字排序。

Number pinyin.compare(a, b) 

a汉字大于b汉字时返回 1

a汉字小于b汉字时返回-1

a汉字等于b汉字时返回0

示例如下:

console.log(pinyin.compare('中心','中国'));    //1 

console.log(pinyin.compare('朋克','朋友'));    //-1 

console.log(pinyin.compare('你好','你好'));    //0 

console.log(pinyin.compare('你好','你好啊'));  //-1 

延伸 · 阅读

精彩推荐
  • 编程技术用户态 Tcpdump 如何实现抓到内核网络包的?

    用户态 Tcpdump 如何实现抓到内核网络包的?

    在网络包的发送和接收过程中,绝大部分的工作都是在内核态完成的。那么问题来了,我们常用的运行在用户态的程序 tcpdump 是那如何实现抓到内核态的包...

    开发内功修炼11612021-09-08
  • 编程技术Delphi - Indy idMessage和idSMTP实现邮件的发送

    Delphi - Indy idMessage和idSMTP实现邮件的发送

    这篇文章主要介绍了Delphi - Indy idMessage和idSMTP实现邮件的发送,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下...

    JJ_JeremyWu6592020-09-22
  • 编程技术2021年值得关注的React PDF 库

    2021年值得关注的React PDF 库

    今天,许多网络应用程序为其用户提供内置的PDF浏览选项。然而,选择一个并不容易,因为它们的功能远远超过显示PDF。在这篇文章中,我将评估5个React的...

    TianTianUp5222021-06-21
  • 编程技术真正聪明的程序员,总有办法不加班

    真正聪明的程序员,总有办法不加班

    工作效率提升了,就可以少加班了,聪明的程序员,总会有一堆可以提升编码效率的工具?当一种工具满足不了工作需求,就去探索新的,今天纬小创就给...

    今日头条12482021-03-04
  • 编程技术从Context源码实现谈React性能优化

    从Context源码实现谈React性能优化

    这篇文章主要介绍Context的实现原理,源码层面掌握React组件的render时机,从而写出高性能的React组件,源码层面了解shouldComponentUpdate、React.memo、PureComponen...

    魔术师卡颂5312020-12-20
  • 编程技术AIOps,SRE工程师手中的利器

    AIOps,SRE工程师手中的利器

    AIOps开始成为一种极为重要的站点可靠性工程工具。它能够高效吸纳观察数据、参与数据以及来自第三方工具的数据,判断系统运行状态并保证其处于最佳...

    至顶网5962021-03-08
  • 编程技术简单、好懂的Svelte实现原理

    简单、好懂的Svelte实现原理

    本文会围绕一张流程图和两个Demo讲解,正确的食用方式是用电脑打开本文,跟着流程图、Demo一边看、一边敲、一边学...

    魔术师卡颂4822021-11-10
  • 编程技术让开发效率倍增的 VS Code 插件

    让开发效率倍增的 VS Code 插件

    今天来分享一些提升开发效率的实用 VS Code 插件!Better Comments 扩展可以帮助我们在代码中创建更人性化的注释,有不同形式和颜色的注释供我们选择。 ...

    前端充电宝7132022-04-21