javascriptjavascript读音,javascript翻译成中文

本文介绍了前端工具库pinyin-pro,可用于将汉字转换为拼音,包括拼音获取、声母韵母处理、多音字支持等功能,并展示了如何在HTML中使用<ruby>标签配合pinyin-pro。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

本篇文章给大家谈谈javascriptjavascript读音,以及javascript翻译成中文,希望对各位有所帮助,不要忘了收藏本站喔。


theme: smartblue

本文简介

点赞 + 关注 + 收藏 = 学会了

这次要推荐一个在前端就能实现 汉字转拼音 的工具库 —— pinyin-pro

这个库不止能把中文转成拼音输出,还有拼音匹配、获取声母、获取韵母、获取拼音首字母等功能python for语句用法

而且还是中文文档啦 ~~这不是废话吗?~~

先看看效果~

01.gif

pinyin-pro

pinyin-pro 包含了和拼音相关的大部分转换功能。

官方文档也写得很好,案例也很全。这里我就不在重复官方文档上面的案例了。

但有时候可能打开github有点困难,所以本文把官方文档的参数部分搬过来。

特色功能

安装

``` npm install pinyin-pro

yarn add pinyin-pro ```

引入

浏览器 引入:

```

```

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 的浏览器是这样显示的:

02.png

html <ruby> 雷猴<rp>(</rp><rt>leihou</rt><rp>)</rp> </ruby>

不支持 ruby 的浏览器的显示效果:

03.png

需要注意的是,注解要写在正文内容后面。

了解了 pinyin-pro<ruby> 的用法,我们尝试一下完成文章开头的那个效果。

01.gif

```html

()

```

把代码放到本地运行一下吧~

推荐阅读

👍《JS 这次真的可以禁止常量修改了!》

👍《JS ES5 也可以创建常量?》

👍《Object.defineProperty 也能监听数组变化?》

👍《JS 将伪数组转换成数组》

点赞 + 关注 + 收藏 = 学会了

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值