首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

汉字拼音首字母查询

上图就是我们要实现的目标:输入一个汉字能够查到它的拼音首字母。

实际上,明白了实现原理之后,通过汉字查拼音、查声母都是可以实现的。

关键在于有没有一个能够使用的源数据。

我们先来看看元件的准备工作。

上面这张图,大家能够看到这个案例使用的所有元件。

最关键的就是命名为“PinYin”的这个元件,它的文字包含了所有的文字以及对应的拼音首字母。

大家可以下载源数据文件,复制里面的内容,粘贴到Axure编辑区中即可。

我们能够看到源数据的格式有一定的规律:[相同拼音首字母的所有文字][拼音首字母][逗号]......

那么,试想一下,当我们输入一个文字点查询时:

1、查询到汉字在源数据中出现的位置;

2、从查询到的位置向后查询逗号所在的位置;

3、获取到逗号所在位置前一位的拼音首字母。

完美!

所以,当我们准备好元件(注意将元件“PinYin”缩小尺寸后隐藏),就可以添加交互了。

交互如上图所示:

查找按钮“Search”【鼠标单击时】,添加用例与动作:【设置文字】于元件“Result”为一个公式...

具体公式是什么样子的呢?

如下图所示:

公式的完整内容是:“汉字的首字母是:[[p.charAt(p.indexOf(',',p.indexOf(w))-1)]]”。

简单说明一下:

“p”和“w”是两个局部变量,分别存入了源数据和输入的汉字内容;

“p.charAt()”能够获取指定位置的字符;

“p.indexOf(w)”能够获取汉字在源数据中出现的位置。

“p.indexOf(',',p.indexOf(w))-1”能够从汉字位置开始向右查找逗号所在的位置,找到的位置减1就是拼音首字母的位置。

这里值得一提的是“indexOf()”这个函数,它能够由左至右的从一个字符串中查询参数字符串出现的位置,它有两个参数,分别是“被查询的字符串”和“查询的起始位置”,如果没有提供第二个参数默认从最左侧向右查询。

好了,到这里这个案例就完成了。

希望大家能够从这个案例中学习到有用的知识点。

最后,邀请大家关注微信订阅号“iaxure”(二维码在本站首页右上方),及时获取本站最新动态内容。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180806G169DL00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券