怎麼將數字的金額千分位格式化?

將表示金額的數字,表示成千分位格式,應該是比較常見的需求。主要是要考慮到有小數的狀況,直接看代碼吧。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

相關文章
相關標籤/搜索