Как добавить разделитель?

в последнем итеме число 200000, сейчас там пробел

вместо запятой (200,000)

$(document).ready(function() { 

 function loading() {
   $('.data__item').each(function() {
     const $this = $(this);
     const $value = $this.find('.data__count');
     const value = $this.find('.data__count').data('progress-value');
     $({
       value: 0
     }).animate({
       value,
     }, {
       duration: 1000,
       step: function load_animate(val) {
         $value.text(`${val.toFixed(0).replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, "$1 ")} `);
       },
     });
   });
 }

 loading();

})
.data {
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 65px;
}

.data__wrap {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -20px;
}

.data__item {
    width: calc(25% - 40px);
    margin: 0 20px;
    margin-bottom: 80px;
}

.data__item:last-child .data__desc {
    max-width: 195px;
}

.data__count {
    font-size: 30px;
    line-height: 1.3;
    color: #68bec4;
    text-align: center;
    padding-bottom: 20px;
    font-weight: 800;
}

.data__desc {
    position: relative;
    max-width: 130px;
    padding-top: 30px;
    margin: 0 auto;
}

.data__desc:after {
    position: absolute;
    content: ' ';
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 35px;
    height: 2px;
    background-color: #fff;
}

.data__desc p {
    font-size: 18px;
    line-height: 1.64;
    color: #fff;
    text-align: center;
    font-weight: 800;
}

* {
  box-sizing: border-box;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="data__wrap">
                <div class="data__item">
                    <p class="data__count" data-progress-value="8">8</p>
                    <div class="data__desc">
                        <p>title 1</p>
                    </div>
                </div>
                <div class="data__item">
                    <p class="data__count" data-progress-value="127">127</p>
                    <div class="data__desc">
                        <p>title 2</p>
                    </div>
                </div>
                <div class="data__item">
                    <p class="data__count" data-progress-value="200">200</p>
                    <div class="data__desc">
                        <p>title 3</p>
                    </div>
                </div>
                <div class="data__item">
                    <p class="data__count" data-progress-value="200000">200,000</p>
                    <div class="data__desc">
                        <p>title 4</p>
                    </div>
                </div>
            </div>


Ответы (1 шт):

Автор решения: Bear Vorkuta

Замените "$1 " на "$1,"

$value.text(`${val.toFixed(0).replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, "$1,")} `)

$(document).ready(function() { 

 function loading() {
   $('.data__item').each(function() {
     const $this = $(this);
     const $value = $this.find('.data__count');
     const value = $this.find('.data__count').data('progress-value');
     $({
       value: 0
     }).animate({
       value,
     }, {
       duration: 1000,
       step: function load_animate(val) {
         $value.text(`${val.toFixed(0).replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, "$1,")} `);
       },
     });
   });
 }

 loading();

})
.data {
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 65px;
}

.data__wrap {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -20px;
}

.data__item {
    width: calc(25% - 40px);
    margin: 0 20px;
    margin-bottom: 80px;
}

.data__item:last-child .data__desc {
    max-width: 195px;
}

.data__count {
    font-size: 30px;
    line-height: 1.3;
    color: #68bec4;
    text-align: center;
    padding-bottom: 20px;
    font-weight: 800;
}

.data__desc {
    position: relative;
    max-width: 130px;
    padding-top: 30px;
    margin: 0 auto;
}

.data__desc:after {
    position: absolute;
    content: ' ';
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 35px;
    height: 2px;
    background-color: #fff;
}

.data__desc p {
    font-size: 18px;
    line-height: 1.64;
    color: #fff;
    text-align: center;
    font-weight: 800;
}

* {
  box-sizing: border-box;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="data__wrap">
                <div class="data__item">
                    <p class="data__count" data-progress-value="8">8</p>
                    <div class="data__desc">
                        <p>title 1</p>
                    </div>
                </div>
                <div class="data__item">
                    <p class="data__count" data-progress-value="127">127</p>
                    <div class="data__desc">
                        <p>title 2</p>
                    </div>
                </div>
                <div class="data__item">
                    <p class="data__count" data-progress-value="200">200</p>
                    <div class="data__desc">
                        <p>title 3</p>
                    </div>
                </div>
                <div class="data__item">
                    <p class="data__count" data-progress-value="200000">200,000</p>
                    <div class="data__desc">
                        <p>title 4</p>
                    </div>
                </div>
            </div>

→ Ссылка