将小数点分隔符添加到通过 API 检索到的 YouTube 观看次数

Question

我正在尝试检索我的 Wordpress 网站上特定视频的 YouTube 观看次数。我不是编码员，但我已经设法使用以下代码让它工作：

<div id="viewCount" style="display: inline-block;"></div>
 <script>
       let getviewCount = () => {
        fetch(`https://www.googleapis.com/youtube/v3/videos?part=statistics&id=Cemk32wKN_k&key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXX`)
        .then(response => {
            return response.json()
        })
        .then(data => {
            console.log(data);
            viewCount.innerHTML = data["items"][0].statistics.viewCount;
        })      
    }
    getviewCount(); 
    </script>

我想添加的最后一点是小数点分隔符，而不是像这样的数字：

13526897

看起来像这样：

13,526,897

根据此处的一些研究，我认为我需要使用与此类似的函数：

function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

但我不会编码，所以结合这两个想法现在超出了我的能力范围。

如果有人不介意教我怎么做，我将不胜感激！

谢谢

Answer 1

let num = '13,526,897';
    num = num.replace(/\,/g, ''); 
    num = parseInt(num, 10);

如果你想再次使用这段代码，你可以创建一个函数：

function parseNumber(number) {
   return parseInt(number.replace(/\,/g,''), 10); 
}

Answer 2

恭喜您第一次尝试编程！将 numberWithCommas 的函数定义复制并粘贴到单词 let 之前。

要使用您添加的函数，只需在括号内调用 numberWithCommas 和 data["items"][0].statistics.viewCount。

总而言之，您的新代码如下所示：

<div id="viewCount" style="display: inline-block;"></div>
 <script>
function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
       let getviewCount = () => {
        fetch(`https://www.googleapis.com/youtube/v3/videos?part=statistics&id=Cemk32wKN_k&key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXX`)
        .then(response => {
            return response.json()
        })
        .then(data => {
            console.log(data);
            viewCount.innerHTML = numberWithCommas(data["items"][0].statistics.viewCount);
        })      
    }
    getviewCount(); 
    </script>

Answer 3

这是你应该做的...

    <div id="viewCount" style="display: inline-block;"></div>
 <script>
       let getviewCount = () => {
        fetch(`https://www.googleapis.com/youtube/v3/videos?part=statistics&id=Cemk32wKN_k&key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXX`)
        .then(response => {
            return response.json()
        })
        .then(data => {
            console.log(data);
            numberWithCommas(viewCount.innerHTML = data["items"][0].statistics.viewCount);
        })      
    }
    getviewCount(); 

    function numberWithCommas(x) {
       return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
     }
    </script>

Answer 4

Javascript 具有内置函数

Intl.NumberFormat() 函数

它将根据用户的默认浏览器语言格式化数字。

var number = 1234567890;
console.log(new Intl.NumberFormat().format(number));

会输出

美国客户 1,234,567,890

德国客户1.234.567.890

将小数点分隔符添加到通过 API 检索到的 YouTube 观看次数

Adding decimal separators to a YouTube view count retrieved via API

html

javascript

youtube-api