时间戳

首页 > 解决方案 > 有没有办法用请求语言环境格式化数字？

reactjs - 有没有办法用请求语言环境格式化数字？

问题描述

我正在使用 create-react-app 包，并且我有一个在 DOM 上呈现的组件。该组件有一个表：

<table>
    <thead>
      <tr>
        <th>Song Name</th>
        <th>Spotify Views</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><a>Moments</a></td>
        <td id="views">6552742</td>
      </tr>
    </tbody>
</table>

td #views 中的数字按预期显示为 6552742，但我希望仅使用 React 标签（使用请求语言环境）显示为 6.552.742（或 6,552,742，具体取决于语言环境）。有什么办法吗？

编辑：我实现了这个，它可以工作......但对我来说它看起来像很多代码:(

document.addEventListener('DOMContentLoaded', function() {
    let arrayViews = document.getElementsByTagName("td");
    for (let tdValue of arrayViews){ 
        if(!isNaN(tdValue.innerText)){
            tdValue.innerText =  Intl.NumberFormat(navigator.languages, { maximumSignificantDigits: navigator.maximumSignificantDigits }).format(tdValue.innerText);
        } 
    }
})

标签： reactjs

解决方案

JS 代码方法看起来像：

function formatNumber(n) {
  if (n < 0) { throw 'must be non-negative: ' + n; } 
  if (n === 0) { return '0'; }

  var output = [];

  for (; n > 0; n = Math.floor(n/1000)) {
    output.unshift(n % 1000);
  }

  return output.join("'");  //looks like 6'552'742

}

var numbers = document.getElementsByClassName('views');

for (var index = 0; index < numbers.length; index++) {
  var elem = numbers.item(index);
  elem.textContent = formatNumber(parseInt(elem.textContent));
}

为了使 JS 函数formatNumber与您的 html 一起使用，您必须按如下方式调整您的 html（更改id为class）：

<td class="views">6552742</td>

有多种格式选项。这里有一些：

  return output.join(" ");  looks like 6 552 742
  return output.join(",");  looks like 6,552,742
  return output.join(".");  looks like 6.552.742

我希望我能帮助你！

推荐阅读