基于平均评分的星级展示实现（Vanilla JS）

原代码的判断逻辑存在错误，无法正确区分小数部分是否大于0.5的场景，导致半星永远不会被渲染。以下是修正后的完整代码及逻辑说明：

const shirt = {
  name: "White Shirt",
  newPrice: 10.99,
  oldPrice: 29.99,
  avgRating: 4.3
}

const productDetail = document.querySelector('.product-detail')
productDetail.innerHTML = `
<h2>${shirt.name}</h2>
<div class="sale-perc">
  <span>33% OFF</span>
</div>
<div class="price-review">
  <div class="price">
    <span class="new-price">${shirt.newPrice}</span>
    <span class="old-price">${shirt.oldPrice}</span>
  </div>
  <div class="review-rating">
   <div class="review-stars">
   <p>
   ${(() => {
     let rating = ''
     const avgRating = shirt.avgRating
     const integerPart = Math.floor(avgRating)
     const decimalPart = avgRating % 1

     for (let i = 0; i < 5; i++) {
       if (i < integerPart) {
         // 整数部分范围内，渲染实心整星
         rating += `<i class="fa-solid fa-star"></i>`
       } else if (i === integerPart && decimalPart > 0.5) {
         // 整数位置且小数部分>0.5，渲染半星
         rating += `<i class="fa-solid fa-star-half-alt"></i>`
       } else {
         // 其余情况（小数≤0.5、超出整数部分的位置）渲染空心星
         rating += `<i class="fa-regular fa-star"></i>`
       }
     }
     return rating
   })()}
    </p>
   </div> 
</div>
</div>
`

逻辑说明 #

1. 拆分平均分的整数部分（通过Math.floor()取整）和小数部分（通过取余运算%1获取）
2. 循环生成5颗星：
   • 循环索引小于整数部分时，显示实心整星
   • 循环索引等于整数部分且小数部分>0.5时，显示半星
   • 其余所有情况显示空心星

测试场景验证 #

• 若avgRating = 4.6：显示4颗整星 + 1颗半星
• 若avgRating = 4.3：显示4颗整星 + 1颗空心星
• 若avgRating = 2.7：显示2颗整星 + 1颗半星 + 2颗空心星

内容的提问来源于stack exchange，提问作者Noble String