汉字拼音首字母查询

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

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

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

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

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

最关键的就是命名为“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”（二维码在本站首页右上方），及时获取本站最新动态内容。