怎么将数字的金额千分位格式化？

时间 2020-07-12

标签怎么数字金额千分位格式化繁體版

原文原文链接

将表示金额的数字，表示成千分位格式，应该是比较常见的需求。主要是要考虑到有小数的状况，直接看代码吧。html

1. 代码怎么写？

<style>
    body {
      background: #090822;
    }
    .container {
      float: left;
      margin-right: 30px;
    }
    .money {
      font-size: 60px;
      font-family: 'myCoolFont';
      /*自定义的字体名字*/
      color: #07c6ff;
    }
  </style>
</head>

<body>
  <div class="formate-before container">
    <div class="money1 money">520520850</div>
    <div class="money2 money">13141314.1314</div>
    <div class="money3 money">-996996996</div>
    <div class="money4 money">-95279.5279</div>
  </div>
  <div class="formate-after container">
    <div class="money1 money"></div>
    <div class="money2 money"></div>
    <div class="money3 money"></div>
    <div class="money4 money"></div>
  </div>

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    var number1 = formateNumbers(520520850),
      number2 = formateNumbers(13141314.1314),
      number3 = formateNumbers(-9996996996),
      number4 = formateNumbers(-95279.5279);
    $('.formate-after .money1').text(number1);
    $('.formate-after .money2').text(number2);
    $('.formate-after .money3').text(number3);
    $('.formate-after .money4').text(number4);
    /**
     * @description: 用于将数字金额，处理成千分位格式
     * @param {Number} num 须要处理的数字
     * @param {String} mark 用于分隔的字符
     * @return:{String} 千分位格式的金额
     */
    function formateNumbers(number, mark) {
      var separator = mark || ',';
      // 将数字根据小数点'.'分割成数组
      var arrNumber = number && number.toString().split('.');
      if (arrNumber && arrNumber.length) {
        // 将小数点前面的数字，添加分隔符
        arrNumber[0] = arrNumber[0].replace(/\B(?=(\d{3})+(?!\d))/g, separator);
      }
      // 将数组处理为字符串返回
      return arrNumber && arrNumber.join('.');
    }
  </script>

能够自定义用于分隔的字符，默认是用逗号,分隔。jquery

2. 示例代码下载

能够复制以上代码运行查看使用效果，也能够到GitHub: https://github.com/Jackyyans/code123下载，更多示例将会持续更新，欢迎关注。git