JS或类似语言做五星评分图标输出的唠叨

在微信小程序中阅读

一年前做项目的时候，有一个需求是做五星评分的图标输出控制，类似于淘宝购物评价的那种。

刚拿到的时候，我以为很简单，不是五个星星的图标嘛。

啪啪啪敲出几行js搞定[嗯，图标就以Fa图标为例吧]

var str = '';
var num = parseInt(star);
for (var i = 0; i < num; i++) {
    str += '<span class="fa fa-star"></span>';
}

等等，好像有问题，评分并不是只有实心的呀，只好继续补充

var str = '';
var num = parseInt(star);
for (var i = 0; i < num; i++) {
    str += '<span class="fa fa-star"></span>';
}
for (var i = 0; i < (5-num);i++) {
    str += '<span class="fa fa-star-o"></span>';
}

嗯，基本上能用了，没毛病；

但是后来，我才看清楚，评分是x.x的，有小数点的呀。假若是4.5这种，就应该是有半边实心的。

思来想去，搞出一个下面的生成，自以为没问题了，还经过测试的呢。【这个函数因为需要算半心，为了方便，让后台给的0-100的数】

var heart = function(num) {
    var newNum = num / 10;
    var str = '';
    for (var i = 0, n = Math.floor(newNum / 2); i < n; i++) {
        str += '<span class="fa fa-star"></span>';
    }
    if (num % 20 >= 10) {
        str += '<span class="fa fa-star-half-o"></span>';
    } else if (num % 20 > 0) {
        str += '<span class="fa fa-star-o"></span>';
    }
    for (var i = 0, n = 5 - Math.ceil(newNum / 2); i < n; i += 2) {
        str += '<span class="fa fa-star-o"></span>';
    }
    return str;
}

啧啧，这个方法写完就已经懵圈了，我也不管这么多，就放上去用了一年多，因为item评分都是4-5分的，没毛病……

后来，突然出现了一个1分的测试项……卧槽，就变成1颗实心两颗空心了……总共才三颗心，这函数毛病就大了。

想来想去，始终是自己没控制好输出的内容数量，但中间插入半心确实又经常出问题。

猛然想到了数组，用数组的下标与预先设置数量，完全可以避免出现这种“缺心眼”的毛病。

var heart = function(num) {
    var str = '';
    // 默认全部空心
    var heart = ['-o','-o','-o','-o','-o'];
    // 取得实心的数量
    var loop = Math.floor(num/20);
    // 看看有没有半心的
    var half = !!(num/20 >= loop + 0.5);
    // 我们把心数组的实心循环出来
    for (var i = 0; i < loop; i++) {
        heart[i] = '';
    }
    // 嗯，再把对应位置的半心加上去
    if (half) heart[loop] = '-half-o';
    // 最后组装html
    for (var i = 0, n = heart.length; i < n; i++) {
        str += '<span class="fa fa-star'+heart[i]+'"></span>';
    }

    return str;
}

这个函数还可以简写一些，为了更好理解，所以是按逻辑思路一步一步走的。