如何通过for循环拼接星级评分组件星星标记，按需渲染对应数量？

你的代码核心问题是循环内部的return语句直接终止了函数执行——第一次循环时就返回了单个星星的HTML，后续循环根本没机会运行。另外循环条件i < productRate + 1会导致多渲染1个星星（比如评3分的话会循环4次），逻辑也不正确。

修复后的代码 #

const ratingHandler = (productRate) => {
  // 确保评分不超过5星的上限
  const validRate = Math.min(productRate, 5);
  let starsHtml = '';
  
  // 循环对应次数，拼接星星HTML
  for (let i = 0; i < validRate; i++) {
    starsHtml += `<img src="assets/star.svg" alt="rating-star" />`;
  }
  
  return starsHtml;
};

关键改动说明 #

• 用Math.min(productRate, 5)限制评分最大值，符合最多5星的需求
• 初始化空字符串starsHtml，循环中不断拼接星星标签，而非立刻返回中断循环
• 调整循环条件为i < validRate，保证渲染的星星数量和评分完全匹配

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