如何使用CSS或SCSS实现应用中数字每3位逗号分隔？

下面提供几种实用的方案，可根据你的浏览器兼容性需求选择：

方案一：纯CSS（现代浏览器支持） #

利用CSS的format-number()函数结合data-*属性实现，无需JS或预编译工具。

代码示例 #

HTML：

<span class="number" data-value="1234567.89"></span>

CSS：

.number::before {
  /* 将data-value中的数字格式化为带千分位逗号的形式 */
  content: format-number(attr(data-value number), ",");
}

注意事项 #

• 该方法依赖CSS Values and Units Module Level 4特性，仅Chrome、Edge 94+、Safari 15.4+等现代浏览器支持，旧浏览器无法生效。

方案二：SCSS预编译处理 #

如果你的项目使用SCSS，可以编写自定义函数，在编译阶段就把数字转换成带千分位的格式，兼容性拉满。

代码示例 #

SCSS自定义函数：

@function format-number($num) {
  // 将数字转为字符串
  $num-str: $num + '';
  // 检查是否存在小数部分
  $decimal-pos: str-index($num-str, '.');
  // 分离整数与小数部分
  $integer-part: if($decimal-pos, str-slice($num-str, 1, $decimal-pos - 1), $num-str);
  $formatted-integer: '';
  $integer-length: str-length($integer-part);

  // 从后往前遍历整数部分，每3位添加逗号
  @for $i from 1 through $integer-length {
    $current-char: str-slice($integer-part, $integer-length - $i + 1, $integer-length - $i + 1);
    $formatted-integer: $current-char + $formatted-integer;
    // 非最后一位且为3的倍数时插入逗号
    @if $i % 3 == 0 and $i != $integer-length {
      $formatted-integer: ',' + $formatted-integer;
    }
  }

  // 拼接小数部分后返回结果
  @if $decimal-pos {
    @return $formatted-integer + str-slice($num-str, $decimal-pos);
  } @else {
    @return $formatted-integer;
  }
}

使用方式：

// 直接在样式中调用函数生成格式化数字
.number::before {
  content: "#{format-number(1234567.89)}";
}

// 结合变量使用示例
$product-price: 9876543.21;
.price-tag::before {
  content: "¥#{format-number($product-price)}";
}

方案三：CSS变量+JS（兼容全浏览器） #

如果需要兼容旧浏览器，可通过JS将格式化后的数字存入CSS变量，再用CSS控制显示，兼顾样式控制和兼容性。

代码示例 #

HTML：

<span class="number">1234567.89</span>

JS：

// 遍历所有.number元素，格式化数字并设置CSS变量
document.querySelectorAll('.number').forEach(el => {
  const rawNum = el.textContent.trim();
  const formattedNum = parseFloat(rawNum).toLocaleString();
  el.style.setProperty('--formatted-num', `"${formattedNum}"`);
});

CSS：

.number {
  // 隐藏原始文本
  visibility: hidden;
}
.number::before {
  // 显示格式化后的数字
  content: var(--formatted-num);
  visibility: visible;
  display: inline-block;
}

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