如何将长数字按三位一组分隔 提升网站数字展示可读性

1. 前端JavaScript实现（最常用，适配静态/动态渲染页面） #

可以通过正则匹配批量处理页面中的长数字，无需修改后端逻辑：

• 单个数字转换工具函数：

function formatNumber(num) {
  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
}
// 测试效果
console.log(formatNumber(154568545)) // 输出 154 568 545
console.log(formatNumber(8516548964)) // 输出 8 516 548 964
console.log(formatNumber(455656)) // 输出 455 656

• 全站自动批量转换：页面加载完成后自动遍历所有文本节点处理长数字：

document.addEventListener('DOMContentLoaded', () => {
  const textWalker = document.createTreeWalker(
    document.body,
    NodeFilter.SHOW_TEXT,
    {
      acceptNode: node => {
        // 排除脚本、样式、代码块内的内容，避免影响业务
        if (['SCRIPT', 'STYLE', 'CODE'].includes(node.parentElement.tagName)) return NodeFilter.FILTER_REJECT;
        // 只处理长度大于等于4位的数字
        return /\d{4,}/.test(node.textContent) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
      }
    }
  );
  let node;
  while (node = textWalker.nextNode()) {
    node.textContent = node.textContent.replace(/\d{4,}/g, match => match.replace(/\B(?=(\d{3})+(?!\d))/g, ' '));
  }
});

如果页面有AJAX动态加载的内容，在新内容插入DOM后重新调用转换逻辑即可。

2. 后端渲染时预处理（适合服务端渲染场景） #

可以直接在数据输出前格式化，不同语言的实现示例如下：

• PHP：

function formatNumber($num) {
  return number_format($num, 0, '', ' ');
}

• Python：

def format_number(num):
    return f"{num:,}".replace(',', ' ')

• Java：

import java.text.DecimalFormat;

public class NumUtil {
    public static String formatNumber(long num) {
        DecimalFormat df = new DecimalFormat("#,###");
        return df.format(num).replace(',', ' ');
    }
}

注意事项 #

处理前需要排除不需要格式化的数字场景，比如手机号、身份证号、验证码、订单编号等特殊业务数字，避免出现逻辑异常。

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