CSS进度条百分比显示：数值与字符串转换解决方案

在CSS进度条中实现百分比显示时，经常需要处理数值变量与字符串变量的转换问题。以下是几种巧妙的解决方案：

方法一：使用CSS自定义属性(变量)和calc()

.progress-bar {
  --progress: 75; /* 数值变量 */
  width: calc(var(--progress) * 1%);
}

.progress-bar::after {
  content: var(--progress) "%"; /* 自动转换为字符串 */
}

方法二：使用JavaScript动态设置

const progress = 75; // 数值变量
const progressBar = document.querySelector('.progress-bar');

// 设置宽度
progressBar.style.setProperty('--progress', progress);

// 设置显示文本
progressBar.setAttribute('data-progress', progress + '%');

对应CSS:

.progress-bar::after {
  content: attr(data-progress);
}

方法三：使用CSS计数器

.progress-container {
  counter-reset: progress var(--progress);
}

.progress-bar::after {
  content: counter(progress) "%";
}

方法四：使用Sass/Less预处理

$progress: 75;

.progress-bar {
  width: $progress * 1%;

  &::after {
    content: #{$progress} + "%";
  }
}

最佳实践建议

1. 优先使用CSS自定义属性：现代浏览器都支持，无需JavaScript即可实现动态更新
2. 考虑兼容性：如果需要支持旧浏览器，可以结合JavaScript方案

3. 动画效果：使用CSS transition实现平滑的进度变化

   .progress-bar {
    transition: width 0.3s ease;
   }
   

4. 可访问性：确保屏幕阅读器能正确读取进度信息

   <div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
   

这些方法都能有效解决数值与字符串转换问题，选择哪种取决于您的具体项目需求和浏览器支持要求。